@blocknote/ariakit 0.30.0 → 0.31.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 (38) hide show
  1. package/dist/blocknote-ariakit.cjs +1 -1
  2. package/dist/blocknote-ariakit.cjs.map +1 -1
  3. package/dist/blocknote-ariakit.js +224 -201
  4. package/dist/blocknote-ariakit.js.map +1 -1
  5. package/dist/style.css +1 -1
  6. package/dist/webpack-stats.json +1 -1
  7. package/package.json +5 -4
  8. package/src/BlockNoteView.tsx +2 -2
  9. package/src/ariakitStyles.css +669 -670
  10. package/src/badge/Badge.tsx +5 -3
  11. package/src/comments/Card.tsx +8 -5
  12. package/src/comments/Comment.tsx +4 -2
  13. package/src/comments/Editor.tsx +3 -2
  14. package/src/input/TextInput.tsx +12 -1
  15. package/src/menu/Button.tsx +3 -2
  16. package/src/menu/Menu.tsx +11 -6
  17. package/src/panel/Panel.tsx +4 -2
  18. package/src/panel/PanelButton.tsx +2 -1
  19. package/src/popover/Popover.tsx +4 -3
  20. package/src/sideMenu/SideMenuButton.tsx +3 -2
  21. package/src/style.css +97 -7
  22. package/src/suggestionMenu/SuggestionMenu.tsx +2 -1
  23. package/src/suggestionMenu/SuggestionMenuEmptyItem.tsx +2 -1
  24. package/src/suggestionMenu/SuggestionMenuItem.tsx +8 -4
  25. package/src/suggestionMenu/SuggestionMenuLabel.tsx +2 -1
  26. package/src/suggestionMenu/SuggestionMenuLoader.tsx +11 -2
  27. package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx +2 -1
  28. package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx +2 -1
  29. package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx +3 -2
  30. package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx +2 -1
  31. package/src/tableHandle/ExtendButton.tsx +3 -2
  32. package/src/tableHandle/TableHandle.tsx +3 -2
  33. package/src/toolbar/Toolbar.tsx +4 -4
  34. package/src/toolbar/ToolbarButton.tsx +5 -5
  35. package/src/toolbar/ToolbarSelect.tsx +6 -3
  36. package/types/src/input/TextInput.d.ts +5 -1
  37. package/types/src/suggestionMenu/SuggestionMenuItem.d.ts +1 -1
  38. package/types/src/suggestionMenu/SuggestionMenuLoader.d.ts +0 -1
package/src/ariakitStyles.css CHANGED
@@ -3,1006 +3,1005 @@ responsible for the majority of the styling. */
3
3
 
4
4
  /* https://ariakit.org/examples/menu-nested */
5
5
  .bn-ak-button {
6
- --border: rgb(0 0 0/13%);
7
- --highlight: rgb(255 255 255/20%);
8
- --shadow: rgb(0 0 0/10%);
9
- display: flex;
10
- height: 2.5rem;
11
- user-select: none;
12
- align-items: center;
13
- justify-content: center;
14
- gap: 0.25rem;
15
- white-space: nowrap;
16
- border-radius: 0.5rem;
17
- border-style: none;
18
- background-color: hsl(204 20% 100%);
19
- padding-left: 1rem;
20
- padding-right: 1rem;
21
- font-size: 1rem;
22
- line-height: 1.5rem;
23
- color: hsl(204 4% 0%);
24
- text-decoration-line: none;
25
- outline-width: 2px;
26
- outline-offset: 2px;
27
- outline-color: hsl(204 100% 40%);
28
- box-shadow:
29
- inset 0 0 0 1px var(--border),
30
- inset 0 2px 0 var(--highlight),
31
- inset 0 -1px 0 var(--shadow),
32
- 0 1px 1px var(--shadow);
33
- font-weight: 500;
6
+ --border: rgb(0 0 0/13%);
7
+ --highlight: rgb(255 255 255/20%);
8
+ --shadow: rgb(0 0 0/10%);
9
+ display: flex;
10
+ height: 2.5rem;
11
+ user-select: none;
12
+ align-items: center;
13
+ justify-content: center;
14
+ gap: 0.25rem;
15
+ white-space: nowrap;
16
+ border-radius: 0.5rem;
17
+ border-style: none;
18
+ background-color: hsl(204 20% 100%);
19
+ padding-left: 1rem;
20
+ padding-right: 1rem;
21
+ font-size: 1rem;
22
+ line-height: 1.5rem;
23
+ color: hsl(204 4% 0%);
24
+ text-decoration-line: none;
25
+ outline-width: 2px;
26
+ outline-offset: 2px;
27
+ outline-color: hsl(204 100% 40%);
28
+ box-shadow:
29
+ inset 0 0 0 1px var(--border),
30
+ inset 0 2px 0 var(--highlight),
31
+ inset 0 -1px 0 var(--shadow),
32
+ 0 1px 1px var(--shadow);
33
+ font-weight: 500;
34
34
  }
35
35
 
36
36
  .bn-ak-button:where(.dark, .dark *) {
37
- --border: rgb(255 255 255/10%);
38
- --highlight: rgb(255 255 255/5%);
39
- --shadow: rgb(0 0 0/25%);
40
- background-color: hsl(204 20% 100% / 0.05);
41
- color: hsl(204 20% 100%);
42
- box-shadow:
43
- inset 0 0 0 1px var(--border),
44
- inset 0 -1px 0 1px var(--shadow),
45
- inset 0 1px 0 var(--highlight);
37
+ --border: rgb(255 255 255/10%);
38
+ --highlight: rgb(255 255 255/5%);
39
+ --shadow: rgb(0 0 0/25%);
40
+ background-color: hsl(204 20% 100% / 0.05);
41
+ color: hsl(204 20% 100%);
42
+ box-shadow:
43
+ inset 0 0 0 1px var(--border),
44
+ inset 0 -1px 0 1px var(--shadow),
45
+ inset 0 1px 0 var(--highlight);
46
46
  }
47
47
 
48
48
  .bn-ak-button:not(:active):hover {
49
- --border: rgb(0 0 0/33%);
49
+ --border: rgb(0 0 0/33%);
50
50
  }
51
51
 
52
52
  .bn-ak-button:where(.dark, .dark *):not(:active):hover {
53
- --border: rgb(255 255 255/25%);
53
+ --border: rgb(255 255 255/25%);
54
54
  }
55
55
 
56
56
  .bn-ak-button[aria-disabled="true"] {
57
- opacity: 0.5;
57
+ opacity: 0.5;
58
58
  }
59
59
 
60
60
  .bn-ak-button[data-focus-visible] {
61
- outline-style: solid;
61
+ outline-style: solid;
62
62
  }
63
63
 
64
64
  .bn-ak-button:active,
65
65
  .bn-ak-button[data-active] {
66
- padding-top: 0.125rem;
67
- box-shadow:
68
- inset 0 0 0 1px var(--border),
69
- inset 0 2px 0 var(--border);
66
+ padding-top: 0.125rem;
67
+ box-shadow:
68
+ inset 0 0 0 1px var(--border),
69
+ inset 0 2px 0 var(--border);
70
70
  }
71
71
 
72
72
  @media (min-width: 640px) {
73
- .bn-ak-button {
74
- gap: 0.5rem;
75
- }
73
+ .bn-ak-button {
74
+ gap: 0.5rem;
75
+ }
76
76
  }
77
77
 
78
78
  .bn-ak-button:active:where(.dark, .dark *),
79
79
  .bn-ak-button[data-active]:where(.dark, .dark *) {
80
- box-shadow:
81
- inset 0 0 0 1px var(--border),
82
- inset 0 1px 1px 1px var(--shadow);
80
+ box-shadow:
81
+ inset 0 0 0 1px var(--border),
82
+ inset 0 1px 1px 1px var(--shadow);
83
83
  }
84
84
 
85
85
  .bn-ak-menu {
86
- position: relative;
87
- z-index: 50;
88
- display: flex;
89
- max-height: var(--popover-available-height);
90
- min-width: 180px;
91
- flex-direction: column;
92
- overscroll-behavior: contain;
93
- border-radius: 0.5rem;
94
- border-width: 1px;
95
- border-style: solid;
96
- border-color: hsl(204 20% 88%);
97
- background-color: hsl(204 20% 100%);
98
- padding: 0.5rem;
99
- color: hsl(204 4% 0%);
100
- box-shadow:
101
- 0 10px 15px -3px rgb(0 0 0 / 0.1),
102
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
103
- outline: none !important;
104
- overflow: visible;
86
+ position: relative;
87
+ z-index: 50;
88
+ display: flex;
89
+ max-height: var(--popover-available-height);
90
+ min-width: 180px;
91
+ flex-direction: column;
92
+ overscroll-behavior: contain;
93
+ border-radius: 0.5rem;
94
+ border-width: 1px;
95
+ border-style: solid;
96
+ border-color: hsl(204 20% 88%);
97
+ background-color: hsl(204 20% 100%);
98
+ padding: 0.5rem;
99
+ color: hsl(204 4% 0%);
100
+ box-shadow:
101
+ 0 10px 15px -3px rgb(0 0 0 / 0.1),
102
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
103
+ outline: none !important;
104
+ overflow: visible;
105
105
  }
106
106
 
107
107
  .bn-ak-menu:where(.dark, .dark *) {
108
- border-color: hsl(204 4% 24%);
109
- background-color: hsl(204 4% 16%);
110
- color: hsl(204 20% 100%);
111
- box-shadow:
112
- 0 10px 15px -3px rgb(0 0 0 / 0.25),
113
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
108
+ border-color: hsl(204 4% 24%);
109
+ background-color: hsl(204 4% 16%);
110
+ color: hsl(204 20% 100%);
111
+ box-shadow:
112
+ 0 10px 15px -3px rgb(0 0 0 / 0.25),
113
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
114
114
  }
115
115
 
116
116
  .bn-ak-menu-item {
117
- display: flex;
118
- cursor: default;
119
- scroll-margin: 0.5rem;
120
- align-items: center;
121
- gap: 0.5rem;
122
- border-radius: 0.25rem;
123
- padding: 0.5rem;
124
- outline: none !important;
117
+ display: flex;
118
+ cursor: default;
119
+ scroll-margin: 0.5rem;
120
+ align-items: center;
121
+ gap: 0.5rem;
122
+ border-radius: 0.25rem;
123
+ padding: 0.5rem;
124
+ outline: none !important;
125
125
  }
126
126
 
127
127
  .bn-ak-menu-item[aria-disabled="true"] {
128
- opacity: 0.25;
128
+ opacity: 0.25;
129
129
  }
130
130
 
131
131
  .bn-ak-menu-item[data-active-item] {
132
- background-color: hsl(204 100% 40%);
133
- color: hsl(204 20% 100%);
132
+ background-color: hsl(204 100% 40%);
133
+ color: hsl(204 20% 100%);
134
134
  }
135
135
 
136
136
  .bn-ak-menu-item:active,
137
137
  .bn-ak-menu-item[data-active] {
138
- background-color: hsl(204 100% 32%);
139
- padding-top: 9px;
140
- padding-bottom: 7px;
138
+ background-color: hsl(204 100% 32%);
139
+ padding-top: 9px;
140
+ padding-bottom: 7px;
141
141
  }
142
142
 
143
- .bn-ak-menu:not(:focus)
144
- .bn-ak-menu-item:not(:focus)[aria-expanded="true"] {
145
- background-color: hsl(204 4% 0% / 7.5%);
146
- color: currentColor;
143
+ .bn-ak-menu:not(:focus) .bn-ak-menu-item:not(:focus)[aria-expanded="true"] {
144
+ background-color: hsl(204 4% 0% / 7.5%);
145
+ color: currentColor;
147
146
  }
148
147
 
149
148
  .bn-ak-menu:not(:focus)
150
- .bn-ak-menu-item:not(:focus)[aria-expanded="true"]:where(.dark, .dark *) {
151
- background-color: hsl(204 20% 100% / 0.1);
149
+ .bn-ak-menu-item:not(:focus)[aria-expanded="true"]:where(.dark, .dark *) {
150
+ background-color: hsl(204 20% 100% / 0.1);
152
151
  }
153
152
 
154
153
  .bn-ak-menu-item .label {
155
- flex: 1 1 0%;
154
+ flex: 1 1 0%;
156
155
  }
157
156
 
158
157
  /* https://ariakit.org/examples/form-select */
159
158
  .bn-ak-button {
160
- --border: rgb(0 0 0/13%);
161
- --highlight: rgb(255 255 255/20%);
162
- --shadow: rgb(0 0 0/10%);
163
- display: flex;
164
- height: 2.5rem;
165
- user-select: none;
166
- align-items: center;
167
- gap: 0.25rem;
168
- white-space: nowrap;
169
- border-style: none;
170
- background-color: hsl(204 20% 100%);
171
- padding-left: 1rem;
172
- padding-right: 1rem;
173
- font-size: 1rem;
174
- line-height: 1.5rem;
175
- color: hsl(204 4% 0%);
176
- text-decoration-line: none;
177
- outline-width: 2px;
178
- outline-offset: 2px;
179
- outline-color: hsl(204 100% 40%);
180
- box-shadow:
181
- inset 0 0 0 1px var(--border),
182
- inset 0 2px 0 var(--highlight),
183
- inset 0 -1px 0 var(--shadow),
184
- 0 1px 1px var(--shadow);
185
- justify-content: space-between;
186
- width: 100%;
187
- border-radius: 0.375rem;
159
+ --border: rgb(0 0 0/13%);
160
+ --highlight: rgb(255 255 255/20%);
161
+ --shadow: rgb(0 0 0/10%);
162
+ display: flex;
163
+ height: 2.5rem;
164
+ user-select: none;
165
+ align-items: center;
166
+ gap: 0.25rem;
167
+ white-space: nowrap;
168
+ border-style: none;
169
+ background-color: hsl(204 20% 100%);
170
+ padding-left: 1rem;
171
+ padding-right: 1rem;
172
+ font-size: 1rem;
173
+ line-height: 1.5rem;
174
+ color: hsl(204 4% 0%);
175
+ text-decoration-line: none;
176
+ outline-width: 2px;
177
+ outline-offset: 2px;
178
+ outline-color: hsl(204 100% 40%);
179
+ box-shadow:
180
+ inset 0 0 0 1px var(--border),
181
+ inset 0 2px 0 var(--highlight),
182
+ inset 0 -1px 0 var(--shadow),
183
+ 0 1px 1px var(--shadow);
184
+ justify-content: space-between;
185
+ width: 100%;
186
+ border-radius: 0.375rem;
188
187
  }
189
188
 
190
189
  .bn-ak-button:where(.dark, .dark *) {
191
- --border: rgb(255 255 255/10%);
192
- --highlight: rgb(255 255 255/5%);
193
- --shadow: rgb(0 0 0/25%);
194
- background-color: hsl(204 20% 100% / 0.05);
195
- color: hsl(204 20% 100%);
196
- box-shadow:
197
- inset 0 0 0 1px var(--border),
198
- inset 0 -1px 0 1px var(--shadow),
199
- inset 0 1px 0 var(--highlight);
190
+ --border: rgb(255 255 255/10%);
191
+ --highlight: rgb(255 255 255/5%);
192
+ --shadow: rgb(0 0 0/25%);
193
+ background-color: hsl(204 20% 100% / 0.05);
194
+ color: hsl(204 20% 100%);
195
+ box-shadow:
196
+ inset 0 0 0 1px var(--border),
197
+ inset 0 -1px 0 1px var(--shadow),
198
+ inset 0 1px 0 var(--highlight);
200
199
  }
201
200
 
202
201
  .bn-ak-button:not(:active):hover {
203
- --border: rgb(0 0 0/33%);
202
+ --border: rgb(0 0 0/33%);
204
203
  }
205
204
 
206
205
  .bn-ak-button:where(.dark, .dark *):not(:active):hover {
207
- --border: rgb(255 255 255/25%);
206
+ --border: rgb(255 255 255/25%);
208
207
  }
209
208
 
210
209
  .bn-ak-primary {
211
- --border: rgba(0, 0, 0, 0.15);
212
- --highlight: rgba(255, 255, 255, 0.25);
213
- --shadow: rgba(0, 0, 0, 0.15);
214
- background-color: hsl(204 100% 40%);
215
- color: hsl(204 20% 100%);
216
- justify-content: center;
210
+ --border: rgba(0, 0, 0, 0.15);
211
+ --highlight: rgba(255, 255, 255, 0.25);
212
+ --shadow: rgba(0, 0, 0, 0.15);
213
+ background-color: hsl(204 100% 40%);
214
+ color: hsl(204 20% 100%);
215
+ justify-content: center;
217
216
  }
218
217
 
219
218
  .bn-ak-primary:hover {
220
- --border: rgba(0, 0, 0, 0.35);
221
- background-color: hsl(204 100% 35%);
219
+ --border: rgba(0, 0, 0, 0.35);
220
+ background-color: hsl(204 100% 35%);
222
221
  }
223
222
 
224
223
  .bn-ak-primary:where(.dark, .dark *) {
225
- --border: rgba(255, 255, 255, 0.25);
226
- --highlight: rgba(255, 255, 255, 0.1);
227
- --shadow: rgba(0, 0, 0, 0.25);
228
- background-color: hsl(204 100% 35%);
224
+ --border: rgba(255, 255, 255, 0.25);
225
+ --highlight: rgba(255, 255, 255, 0.1);
226
+ --shadow: rgba(0, 0, 0, 0.25);
227
+ background-color: hsl(204 100% 35%);
229
228
  }
230
229
 
231
230
  .bn-ak-primary:hover:where(.dark, .dark *) {
232
- --border: rgba(255, 255, 255, 0.45);
233
- background-color: hsl(204 100% 40%);
231
+ --border: rgba(255, 255, 255, 0.45);
232
+ background-color: hsl(204 100% 40%);
234
233
  }
235
234
 
236
235
  .bn-ak-button[aria-disabled="true"] {
237
- opacity: 0.5;
236
+ opacity: 0.5;
238
237
  }
239
238
 
240
239
  .bn-ak-button[data-focus-visible] {
241
- outline-style: solid;
240
+ outline-style: solid;
242
241
  }
243
242
 
244
243
  .bn-ak-button:active,
245
244
  .bn-ak-button[data-active] {
246
- padding-top: 0.125rem;
247
- box-shadow:
248
- inset 0 0 0 1px var(--border),
249
- inset 0 2px 0 var(--border);
245
+ padding-top: 0.125rem;
246
+ box-shadow:
247
+ inset 0 0 0 1px var(--border),
248
+ inset 0 2px 0 var(--border);
250
249
  }
251
250
 
252
251
  @media (min-width: 640px) {
253
- .bn-ak-button {
254
- gap: 0.5rem;
255
- }
252
+ .bn-ak-button {
253
+ gap: 0.5rem;
254
+ }
256
255
  }
257
256
 
258
257
  .bn-ak-button:active:where(.dark, .dark *),
259
258
  .bn-ak-button[data-active]:where(.dark, .dark *) {
260
- box-shadow:
261
- inset 0 0 0 1px var(--border),
262
- inset 0 1px 1px 1px var(--shadow);
259
+ box-shadow:
260
+ inset 0 0 0 1px var(--border),
261
+ inset 0 1px 1px 1px var(--shadow);
263
262
  }
264
263
 
265
264
  .bn-ak-wrapper {
266
- display: flex;
267
- width: 320px;
268
- max-width: 100%;
269
- flex-direction: column;
270
- gap: 1.5rem;
271
- border-radius: 0.5rem;
272
- background-color: hsl(204 20% 100%);
273
- padding: 1rem;
274
- box-shadow:
275
- 0 1px 3px 0 rgb(0 0 0 / 0.1),
276
- 0 1px 2px -1px rgb(0 0 0 / 0.1);
265
+ display: flex;
266
+ width: 320px;
267
+ max-width: 100%;
268
+ flex-direction: column;
269
+ gap: 1.5rem;
270
+ border-radius: 0.5rem;
271
+ background-color: hsl(204 20% 100%);
272
+ padding: 1rem;
273
+ box-shadow:
274
+ 0 1px 3px 0 rgb(0 0 0 / 0.1),
275
+ 0 1px 2px -1px rgb(0 0 0 / 0.1);
277
276
  }
278
277
 
279
278
  .bn-ak-label {
280
- padding-left: 1rem;
279
+ padding-left: 1rem;
281
280
  }
282
281
 
283
282
  .bn-ak-popover {
284
- z-index: 50;
285
- display: flex;
286
- max-height: min(var(--popover-available-height, 300px), 300px);
287
- flex-direction: column;
288
- overflow: auto;
289
- overscroll-behavior: contain;
290
- border-radius: 0.5rem;
291
- border-width: 1px;
292
- border-style: solid;
293
- border-color: hsl(204 20% 88%);
294
- background-color: hsl(204 20% 100%);
295
- padding: 0.5rem;
296
- color: hsl(204 4% 0%);
297
- box-shadow:
298
- 0 10px 15px -3px rgb(0 0 0 / 0.1),
299
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
283
+ z-index: 50;
284
+ display: flex;
285
+ max-height: min(var(--popover-available-height, 300px), 300px);
286
+ flex-direction: column;
287
+ overflow: auto;
288
+ overscroll-behavior: contain;
289
+ border-radius: 0.5rem;
290
+ border-width: 1px;
291
+ border-style: solid;
292
+ border-color: hsl(204 20% 88%);
293
+ background-color: hsl(204 20% 100%);
294
+ padding: 0.5rem;
295
+ color: hsl(204 4% 0%);
296
+ box-shadow:
297
+ 0 10px 15px -3px rgb(0 0 0 / 0.1),
298
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
300
299
  }
301
300
 
302
301
  .bn-ak-popover:where(.dark, .dark *) {
303
- border-color: hsl(204 4% 24%);
304
- background-color: hsl(204 4% 16%);
305
- color: hsl(204 20% 100%);
306
- box-shadow:
307
- 0 10px 15px -3px rgb(0 0 0 / 0.25),
308
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
302
+ border-color: hsl(204 4% 24%);
303
+ background-color: hsl(204 4% 16%);
304
+ color: hsl(204 20% 100%);
305
+ box-shadow:
306
+ 0 10px 15px -3px rgb(0 0 0 / 0.25),
307
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
309
308
  }
310
309
 
311
310
  .bn-ak-select-item {
312
- display: flex;
313
- cursor: default;
314
- scroll-margin: 0.5rem;
315
- align-items: center;
316
- gap: 0.5rem;
317
- border-radius: 0.25rem;
318
- padding: 0.5rem;
319
- outline: none !important;
311
+ display: flex;
312
+ cursor: default;
313
+ scroll-margin: 0.5rem;
314
+ align-items: center;
315
+ gap: 0.5rem;
316
+ border-radius: 0.25rem;
317
+ padding: 0.5rem;
318
+ outline: none !important;
320
319
  }
321
320
 
322
321
  .bn-ak-select-item[aria-disabled="true"] {
323
- opacity: 0.5;
322
+ opacity: 0.5;
324
323
  }
325
324
 
326
325
  .bn-ak-select-item[data-active-item] {
327
- background-color: hsl(204 100% 40%);
328
- color: hsl(204 20% 100%);
326
+ background-color: hsl(204 100% 40%);
327
+ color: hsl(204 20% 100%);
329
328
  }
330
329
 
331
330
  .bn-ak-wrapper:where(.dark, .dark *) {
332
- background-color: hsl(204 4% 16%);
333
- box-shadow:
334
- 0 1px 3px 0 rgb(0 0 0 / 0.25),
335
- 0 1px 2px -1px rgb(0 0 0 / 0.1);
331
+ background-color: hsl(204 4% 16%);
332
+ box-shadow:
333
+ 0 1px 3px 0 rgb(0 0 0 / 0.25),
334
+ 0 1px 2px -1px rgb(0 0 0 / 0.1);
336
335
  }
337
336
 
338
337
  .bn-ak-field {
339
- display: flex;
340
- flex-direction: column;
341
- gap: 0.5rem;
338
+ display: flex;
339
+ flex-direction: column;
340
+ gap: 0.5rem;
342
341
  }
343
342
 
344
343
  .bn-ak-input {
345
- height: 2.5rem;
346
- width: 100%;
347
- border-radius: 0.375rem;
348
- border-style: none;
349
- background-color: hsl(204 20% 94% / 0.4);
350
- padding-left: 1rem;
351
- padding-right: 1rem;
352
- font-size: 1rem;
353
- line-height: 1.5rem;
354
- color: hsl(204 4% 0%);
355
- box-shadow:
356
- inset 0 0 0 1px rgba(0 0 0 / 0.1),
357
- inset 0 2px 5px 0 rgba(0 0 0 / 0.05);
344
+ height: 2.5rem;
345
+ width: 100%;
346
+ border-radius: 0.375rem;
347
+ border-style: none;
348
+ background-color: hsl(204 20% 94% / 0.4);
349
+ padding-left: 1rem;
350
+ padding-right: 1rem;
351
+ font-size: 1rem;
352
+ line-height: 1.5rem;
353
+ color: hsl(204 4% 0%);
354
+ box-shadow:
355
+ inset 0 0 0 1px rgba(0 0 0 / 0.1),
356
+ inset 0 2px 5px 0 rgba(0 0 0 / 0.05);
358
357
  }
359
358
 
360
359
  .bn-ak-input::placeholder {
361
- color: hsl(204 4% 0% / 0.6);
360
+ color: hsl(204 4% 0% / 0.6);
362
361
  }
363
362
 
364
363
  .bn-ak-input:hover {
365
- background-color: hsl(204 20% 94%);
364
+ background-color: hsl(204 20% 94%);
366
365
  }
367
366
 
368
367
  .bn-ak-popover:focus-visible,
369
368
  .bn-ak-popover[data-focus-visible],
370
369
  .bn-ak-input:focus-visible,
371
370
  .bn-ak-input[data-focus-visible] {
372
- outline: 2px solid hsl(204 100% 40%);
373
- outline-offset: -1px;
371
+ outline: 2px solid hsl(204 100% 40%);
372
+ outline-offset: -1px;
374
373
  }
375
374
 
376
375
  .bn-ak-input:where(.dark, .dark *) {
377
- background-color: hsl(204 4% 10%);
378
- color: hsl(204 20% 100%);
379
- box-shadow:
380
- inset 0 0 0 1px rgba(255 255 255 / 0.12),
381
- inset 0 -1px 0 0 rgba(255 255 255 / 0.05),
382
- inset 0 2px 5px 0 rgba(0 0 0 / 0.15);
376
+ background-color: hsl(204 4% 10%);
377
+ color: hsl(204 20% 100%);
378
+ box-shadow:
379
+ inset 0 0 0 1px rgba(255 255 255 / 0.12),
380
+ inset 0 -1px 0 0 rgba(255 255 255 / 0.05),
381
+ inset 0 2px 5px 0 rgba(0 0 0 / 0.15);
383
382
  }
384
383
 
385
384
  .bn-ak-input:where(.dark, .dark *)::placeholder {
386
- color: hsl(204 20% 100% / 46%);
385
+ color: hsl(204 20% 100% / 46%);
387
386
  }
388
387
 
389
388
  .bn-ak-input:hover:where(.dark, .dark *) {
390
- background-color: hsl(204 4% 8%);
389
+ background-color: hsl(204 4% 8%);
391
390
  }
392
391
 
393
392
  .bn-ak-error {
394
- width: fit-content;
395
- border-radius: 0.375rem;
396
- border-width: 1px;
397
- border-color: hsl(357 56% 80%);
398
- background-color: hsl(357 56% 80% / 0.4);
399
- padding-top: 0.5rem;
400
- padding-bottom: 0.5rem;
401
- padding-left: 1rem;
402
- padding-right: 1rem;
403
- color: hsl(357 100% 30%);
393
+ width: fit-content;
394
+ border-radius: 0.375rem;
395
+ border-width: 1px;
396
+ border-color: hsl(357 56% 80%);
397
+ background-color: hsl(357 56% 80% / 0.4);
398
+ padding-top: 0.5rem;
399
+ padding-bottom: 0.5rem;
400
+ padding-left: 1rem;
401
+ padding-right: 1rem;
402
+ color: hsl(357 100% 30%);
404
403
  }
405
404
 
406
405
  .bn-ak-error:empty {
407
- display: none;
406
+ display: none;
408
407
  }
409
408
 
410
409
  .bn-ak-error:where(.dark, .dark *) {
411
- border-color: hsl(357 56% 50% / 0.4);
412
- background-color: hsl(357 56% 42% / 0.25);
413
- color: hsl(357 100% 90%);
410
+ border-color: hsl(357 56% 50% / 0.4);
411
+ background-color: hsl(357 56% 42% / 0.25);
412
+ color: hsl(357 100% 90%);
414
413
  }
415
414
 
416
415
  .bn-ak-buttons {
417
- display: flex;
418
- gap: 1rem;
419
- padding-top: 1rem;
416
+ display: flex;
417
+ gap: 1rem;
418
+ padding-top: 1rem;
420
419
  }
421
420
 
422
421
  /* https://ariakit.org/components/menu */
423
422
  .bn-ak-button {
424
- --border: rgb(0 0 0/13%);
425
- --highlight: rgb(255 255 255/20%);
426
- --shadow: rgb(0 0 0/10%);
427
- display: flex;
428
- height: 2.5rem;
429
- user-select: none;
430
- align-items: center;
431
- justify-content: center;
432
- gap: 0.25rem;
433
- white-space: nowrap;
434
- border-radius: 0.5rem;
435
- border-style: none;
436
- background-color: hsl(204 20% 100%);
437
- padding-left: 1rem;
438
- padding-right: 1rem;
439
- font-size: 1rem;
440
- line-height: 1.5rem;
441
- color: hsl(204 4% 0%);
442
- text-decoration-line: none;
443
- outline-width: 2px;
444
- outline-offset: 2px;
445
- outline-color: hsl(204 100% 40%);
446
- box-shadow:
447
- inset 0 0 0 1px var(--border),
448
- inset 0 2px 0 var(--highlight),
449
- inset 0 -1px 0 var(--shadow),
450
- 0 1px 1px var(--shadow);
451
- font-weight: 500;
423
+ --border: rgb(0 0 0/13%);
424
+ --highlight: rgb(255 255 255/20%);
425
+ --shadow: rgb(0 0 0/10%);
426
+ display: flex;
427
+ height: 2.5rem;
428
+ user-select: none;
429
+ align-items: center;
430
+ justify-content: center;
431
+ gap: 0.25rem;
432
+ white-space: nowrap;
433
+ border-radius: 0.5rem;
434
+ border-style: none;
435
+ background-color: hsl(204 20% 100%);
436
+ padding-left: 1rem;
437
+ padding-right: 1rem;
438
+ font-size: 1rem;
439
+ line-height: 1.5rem;
440
+ color: hsl(204 4% 0%);
441
+ text-decoration-line: none;
442
+ outline-width: 2px;
443
+ outline-offset: 2px;
444
+ outline-color: hsl(204 100% 40%);
445
+ box-shadow:
446
+ inset 0 0 0 1px var(--border),
447
+ inset 0 2px 0 var(--highlight),
448
+ inset 0 -1px 0 var(--shadow),
449
+ 0 1px 1px var(--shadow);
450
+ font-weight: 500;
452
451
  }
453
452
 
454
453
  .bn-ak-button:where(.dark, .dark *) {
455
- --border: rgb(255 255 255/10%);
456
- --highlight: rgb(255 255 255/5%);
457
- --shadow: rgb(0 0 0/25%);
458
- background-color: hsl(204 20% 100% / 0.05);
459
- color: hsl(204 20% 100%);
460
- box-shadow:
461
- inset 0 0 0 1px var(--border),
462
- inset 0 -1px 0 1px var(--shadow),
463
- inset 0 1px 0 var(--highlight);
454
+ --border: rgb(255 255 255/10%);
455
+ --highlight: rgb(255 255 255/5%);
456
+ --shadow: rgb(0 0 0/25%);
457
+ background-color: hsl(204 20% 100% / 0.05);
458
+ color: hsl(204 20% 100%);
459
+ box-shadow:
460
+ inset 0 0 0 1px var(--border),
461
+ inset 0 -1px 0 1px var(--shadow),
462
+ inset 0 1px 0 var(--highlight);
464
463
  }
465
464
 
466
465
  .bn-ak-button:not(:active):hover {
467
- --border: rgb(0 0 0/33%);
466
+ --border: rgb(0 0 0/33%);
468
467
  }
469
468
 
470
469
  .bn-ak-button:where(.dark, .dark *):not(:active):hover {
471
- --border: rgb(255 255 255/25%);
470
+ --border: rgb(255 255 255/25%);
472
471
  }
473
472
 
474
473
  .bn-ak-button[aria-disabled="true"] {
475
- opacity: 0.5;
474
+ opacity: 0.5;
476
475
  }
477
476
 
478
477
  .bn-ak-button[data-focus-visible] {
479
- outline-style: solid;
478
+ outline-style: solid;
480
479
  }
481
480
 
482
481
  .bn-ak-button:active,
483
482
  .bn-ak-button[data-active] {
484
- padding-top: 0.125rem;
485
- box-shadow:
486
- inset 0 0 0 1px var(--border),
487
- inset 0 2px 0 var(--border);
483
+ padding-top: 0.125rem;
484
+ box-shadow:
485
+ inset 0 0 0 1px var(--border),
486
+ inset 0 2px 0 var(--border);
488
487
  }
489
488
 
490
489
  @media (min-width: 640px) {
491
- .bn-ak-button {
492
- gap: 0.5rem;
493
- }
490
+ .bn-ak-button {
491
+ gap: 0.5rem;
492
+ }
494
493
  }
495
494
 
496
495
  .bn-ak-button:active:where(.dark, .dark *),
497
496
  .bn-ak-button[data-active]:where(.dark, .dark *) {
498
- box-shadow:
499
- inset 0 0 0 1px var(--border),
500
- inset 0 1px 1px 1px var(--shadow);
497
+ box-shadow:
498
+ inset 0 0 0 1px var(--border),
499
+ inset 0 1px 1px 1px var(--shadow);
501
500
  }
502
501
 
503
502
  .bn-ak-separator {
504
- margin-top: 0.5rem;
505
- margin-bottom: 0.5rem;
506
- height: 0px;
507
- width: 100%;
508
- border-top-width: 1px;
509
- border-color: hsl(204 20% 88%);
503
+ margin-top: 0.5rem;
504
+ margin-bottom: 0.5rem;
505
+ height: 0px;
506
+ width: 100%;
507
+ border-top-width: 1px;
508
+ border-color: hsl(204 20% 88%);
510
509
  }
511
510
 
512
511
  .bn-ak-separator:where(.dark, .dark *) {
513
- border-color: hsl(204 4% 28%);
512
+ border-color: hsl(204 4% 28%);
514
513
  }
515
514
 
516
515
  .bn-ak-menu {
517
- position: relative;
518
- z-index: 50;
519
- display: flex;
520
- /*max-height: var(--popover-available-height);*/
521
- min-width: 180px;
522
- flex-direction: column;
523
- /*overflow: auto;*/
524
- overscroll-behavior: contain;
525
- border-radius: 0.5rem;
526
- border-width: 1px;
527
- border-style: solid;
528
- border-color: hsl(204 20% 88%);
529
- background-color: hsl(204 20% 100%);
530
- padding: 0.5rem;
531
- color: hsl(204 4% 0%);
532
- box-shadow:
533
- 0 10px 15px -3px rgb(0 0 0 / 0.1),
534
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
535
- outline: none !important;
516
+ position: relative;
517
+ z-index: 50;
518
+ display: flex;
519
+ /*max-height: var(--popover-available-height);*/
520
+ min-width: 180px;
521
+ flex-direction: column;
522
+ /*overflow: auto;*/
523
+ overscroll-behavior: contain;
524
+ border-radius: 0.5rem;
525
+ border-width: 1px;
526
+ border-style: solid;
527
+ border-color: hsl(204 20% 88%);
528
+ background-color: hsl(204 20% 100%);
529
+ padding: 0.5rem;
530
+ color: hsl(204 4% 0%);
531
+ box-shadow:
532
+ 0 10px 15px -3px rgb(0 0 0 / 0.1),
533
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
534
+ outline: none !important;
536
535
  }
537
536
 
538
537
  .bn-ak-menu:where(.dark, .dark *) {
539
- border-color: hsl(204 4% 24%);
540
- background-color: hsl(204 4% 16%);
541
- color: hsl(204 20% 100%);
542
- box-shadow:
543
- 0 10px 15px -3px rgb(0 0 0 / 0.25),
544
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
538
+ border-color: hsl(204 4% 24%);
539
+ background-color: hsl(204 4% 16%);
540
+ color: hsl(204 20% 100%);
541
+ box-shadow:
542
+ 0 10px 15px -3px rgb(0 0 0 / 0.25),
543
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
545
544
  }
546
545
 
547
546
  .bn-ak-menu-item {
548
- display: flex;
549
- cursor: default;
550
- scroll-margin: 0.5rem;
551
- align-items: center;
552
- gap: 0.5rem;
553
- border-radius: 0.25rem;
554
- padding: 0.5rem;
555
- outline: none !important;
547
+ display: flex;
548
+ cursor: default;
549
+ scroll-margin: 0.5rem;
550
+ align-items: center;
551
+ gap: 0.5rem;
552
+ border-radius: 0.25rem;
553
+ padding: 0.5rem;
554
+ outline: none !important;
556
555
  }
557
556
 
558
557
  .bn-ak-menu-item[aria-disabled="true"] {
559
- opacity: 0.25;
558
+ opacity: 0.25;
560
559
  }
561
560
 
562
561
  .bn-ak-menu-item[data-active-item] {
563
- background-color: hsl(204 100% 40%);
564
- color: hsl(204 20% 100%);
562
+ background-color: hsl(204 100% 40%);
563
+ color: hsl(204 20% 100%);
565
564
  }
566
565
 
567
566
  .bn-ak-menu-item:active,
568
567
  .bn-ak-menu-item[data-active] {
569
- background-color: hsl(204 100% 32%);
570
- padding-top: 9px;
571
- padding-bottom: 7px;
568
+ background-color: hsl(204 100% 32%);
569
+ padding-top: 9px;
570
+ padding-bottom: 7px;
572
571
  }
573
572
 
574
573
  /* https://ariakit.org/examples/select-group */
575
574
  .bn-ak-button {
576
- --border: rgb(0 0 0/13%);
577
- --highlight: rgb(255 255 255/20%);
578
- --shadow: rgb(0 0 0/10%);
579
- display: flex;
580
- height: 2.5rem;
581
- user-select: none;
582
- align-items: center;
583
- gap: 0.25rem;
584
- white-space: nowrap;
585
- border-radius: 0.5rem;
586
- border-style: none;
587
- background-color: hsl(204 20% 100%);
588
- padding-left: 1rem;
589
- padding-right: 1rem;
590
- font-size: 1rem;
591
- line-height: 1.5rem;
592
- color: hsl(204 4% 0%);
593
- text-decoration-line: none;
594
- outline-width: 2px;
595
- outline-offset: 2px;
596
- outline-color: hsl(204 100% 40%);
597
- box-shadow:
598
- inset 0 0 0 1px var(--border),
599
- inset 0 2px 0 var(--highlight),
600
- inset 0 -1px 0 var(--shadow),
601
- 0 1px 1px var(--shadow);
602
- width: 200px;
603
- justify-content: space-between;
575
+ --border: rgb(0 0 0/13%);
576
+ --highlight: rgb(255 255 255/20%);
577
+ --shadow: rgb(0 0 0/10%);
578
+ display: flex;
579
+ height: 2.5rem;
580
+ user-select: none;
581
+ align-items: center;
582
+ gap: 0.25rem;
583
+ white-space: nowrap;
584
+ border-radius: 0.5rem;
585
+ border-style: none;
586
+ background-color: hsl(204 20% 100%);
587
+ padding-left: 1rem;
588
+ padding-right: 1rem;
589
+ font-size: 1rem;
590
+ line-height: 1.5rem;
591
+ color: hsl(204 4% 0%);
592
+ text-decoration-line: none;
593
+ outline-width: 2px;
594
+ outline-offset: 2px;
595
+ outline-color: hsl(204 100% 40%);
596
+ box-shadow:
597
+ inset 0 0 0 1px var(--border),
598
+ inset 0 2px 0 var(--highlight),
599
+ inset 0 -1px 0 var(--shadow),
600
+ 0 1px 1px var(--shadow);
601
+ width: 200px;
602
+ justify-content: space-between;
604
603
  }
605
604
 
606
605
  .bn-ak-button:where(.dark, .dark *) {
607
- --border: rgb(255 255 255/10%);
608
- --highlight: rgb(255 255 255/5%);
609
- --shadow: rgb(0 0 0/25%);
610
- background-color: hsl(204 20% 100% / 0.05);
611
- color: hsl(204 20% 100%);
612
- box-shadow:
613
- inset 0 0 0 1px var(--border),
614
- inset 0 -1px 0 1px var(--shadow),
615
- inset 0 1px 0 var(--highlight);
606
+ --border: rgb(255 255 255/10%);
607
+ --highlight: rgb(255 255 255/5%);
608
+ --shadow: rgb(0 0 0/25%);
609
+ background-color: hsl(204 20% 100% / 0.05);
610
+ color: hsl(204 20% 100%);
611
+ box-shadow:
612
+ inset 0 0 0 1px var(--border),
613
+ inset 0 -1px 0 1px var(--shadow),
614
+ inset 0 1px 0 var(--highlight);
616
615
  }
617
616
 
618
617
  .bn-ak-button:not(:active):hover {
619
- --border: rgb(0 0 0/33%);
618
+ --border: rgb(0 0 0/33%);
620
619
  }
621
620
 
622
621
  .bn-ak-button:where(.dark, .dark *):not(:active):hover {
623
- --border: rgb(255 255 255/25%);
622
+ --border: rgb(255 255 255/25%);
624
623
  }
625
624
 
626
625
  .bn-ak-button[aria-disabled="true"] {
627
- opacity: 0.5;
626
+ opacity: 0.5;
628
627
  }
629
628
 
630
629
  .bn-ak-button[data-focus-visible] {
631
- outline-style: solid;
630
+ outline-style: solid;
632
631
  }
633
632
 
634
633
  .bn-ak-button:active,
635
634
  .bn-ak-button[data-active] {
636
- padding-top: 0.125rem;
637
- box-shadow:
638
- inset 0 0 0 1px var(--border),
639
- inset 0 2px 0 var(--border);
635
+ padding-top: 0.125rem;
636
+ box-shadow:
637
+ inset 0 0 0 1px var(--border),
638
+ inset 0 2px 0 var(--border);
640
639
  }
641
640
 
642
641
  @media (min-width: 640px) {
643
- .bn-ak-button {
644
- gap: 0.5rem;
645
- }
642
+ .bn-ak-button {
643
+ gap: 0.5rem;
644
+ }
646
645
  }
647
646
 
648
647
  .bn-ak-button:active:where(.dark, .dark *),
649
648
  .bn-ak-button[data-active]:where(.dark, .dark *) {
650
- box-shadow:
651
- inset 0 0 0 1px var(--border),
652
- inset 0 1px 1px 1px var(--shadow);
649
+ box-shadow:
650
+ inset 0 0 0 1px var(--border),
651
+ inset 0 1px 1px 1px var(--shadow);
653
652
  }
654
653
 
655
654
  .bn-ak-wrapper {
656
- display: flex;
657
- flex-direction: column;
658
- gap: 0.5rem;
659
- padding: 1rem;
655
+ display: flex;
656
+ flex-direction: column;
657
+ gap: 0.5rem;
658
+ padding: 1rem;
660
659
  }
661
660
 
662
661
  .bn-ak-popover {
663
- z-index: 50;
664
- display: flex;
665
- max-height: min(var(--popover-available-height, 300px), 300px);
666
- flex-direction: column;
667
- overflow: auto;
668
- overscroll-behavior: contain;
669
- border-radius: 0.5rem;
670
- border-width: 1px;
671
- border-style: solid;
672
- border-color: hsl(204 20% 88%);
673
- background-color: hsl(204 20% 100%);
674
- padding: 0.5rem;
675
- color: hsl(204 4% 0%);
676
- box-shadow:
677
- 0 10px 15px -3px rgb(0 0 0 / 0.1),
678
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
662
+ z-index: 50;
663
+ display: flex;
664
+ max-height: min(var(--popover-available-height, 300px), 300px);
665
+ flex-direction: column;
666
+ overflow: auto;
667
+ overscroll-behavior: contain;
668
+ border-radius: 0.5rem;
669
+ border-width: 1px;
670
+ border-style: solid;
671
+ border-color: hsl(204 20% 88%);
672
+ background-color: hsl(204 20% 100%);
673
+ padding: 0.5rem;
674
+ color: hsl(204 4% 0%);
675
+ box-shadow:
676
+ 0 10px 15px -3px rgb(0 0 0 / 0.1),
677
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
679
678
  }
680
679
 
681
680
  .bn-ak-popover:focus-visible,
682
681
  .bn-ak-popover[data-focus-visible] {
683
- outline: 2px solid hsl(204 100% 40%);
684
- outline-offset: -1px;
682
+ outline: 2px solid hsl(204 100% 40%);
683
+ outline-offset: -1px;
685
684
  }
686
685
 
687
686
  .bn-ak-popover:where(.dark, .dark *) {
688
- border-color: hsl(204 4% 24%);
689
- background-color: hsl(204 4% 16%);
690
- color: hsl(204 20% 100%);
691
- box-shadow:
692
- 0 10px 15px -3px rgb(0 0 0 / 0.25),
693
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
687
+ border-color: hsl(204 4% 24%);
688
+ background-color: hsl(204 4% 16%);
689
+ color: hsl(204 20% 100%);
690
+ box-shadow:
691
+ 0 10px 15px -3px rgb(0 0 0 / 0.25),
692
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
694
693
  }
695
694
 
696
695
  .bn-ak-select-item {
697
- display: flex;
698
- cursor: default;
699
- scroll-margin: 0.5rem;
700
- align-items: center;
701
- gap: 0.5rem;
702
- border-radius: 0.25rem;
703
- padding: 0.5rem;
704
- outline: none !important;
696
+ display: flex;
697
+ cursor: default;
698
+ scroll-margin: 0.5rem;
699
+ align-items: center;
700
+ gap: 0.5rem;
701
+ border-radius: 0.25rem;
702
+ padding: 0.5rem;
703
+ outline: none !important;
705
704
  }
706
705
 
707
706
  .bn-ak-select-item[aria-disabled="true"] {
708
- opacity: 0.5;
707
+ opacity: 0.5;
709
708
  }
710
709
 
711
710
  .bn-ak-select-item[data-active-item] {
712
- background-color: hsl(204 100% 40%);
713
- color: hsl(204 20% 100%);
711
+ background-color: hsl(204 100% 40%);
712
+ color: hsl(204 20% 100%);
714
713
  }
715
714
 
716
715
  .bn-ak-separator {
717
- margin-top: 0.5rem;
718
- margin-bottom: 0.5rem;
719
- height: 0px;
720
- width: 100%;
721
- border-top-width: 1px;
722
- border-color: hsl(204 20% 88%);
716
+ margin-top: 0.5rem;
717
+ margin-bottom: 0.5rem;
718
+ height: 0px;
719
+ width: 100%;
720
+ border-top-width: 1px;
721
+ border-color: hsl(204 20% 88%);
723
722
  }
724
723
 
725
724
  .bn-ak-separator:where(.dark, .dark *) {
726
- border-color: hsl(204 4% 28%);
725
+ border-color: hsl(204 4% 28%);
727
726
  }
728
727
 
729
728
  .bn-ak-group-label {
730
- cursor: default;
731
- padding: 0.5rem;
732
- font-size: 0.875rem;
733
- line-height: 1.25rem;
734
- font-weight: 500;
735
- opacity: 0.6;
729
+ cursor: default;
730
+ padding: 0.5rem;
731
+ font-size: 0.875rem;
732
+ line-height: 1.25rem;
733
+ font-weight: 500;
734
+ opacity: 0.6;
736
735
  }
737
736
 
738
737
  .bn-ak-group-label + * {
739
- scroll-margin-top: 2.5rem;
738
+ scroll-margin-top: 2.5rem;
740
739
  }
741
740
 
742
741
  /* https://ariakit.org/components/tab */
743
742
  .bn-ak-wrapper {
744
- display: flex;
745
- flex-direction: column;
746
- gap: 0.5rem;
747
- border-radius: 0.5rem;
748
- background-color: hsl(204 20% 100%);
749
- padding: 0.5rem;
750
- box-shadow:
751
- 0 1px 3px 0 rgb(0 0 0 / 0.1),
752
- 0 1px 2px -1px rgb(0 0 0 / 0.1);
743
+ display: flex;
744
+ flex-direction: column;
745
+ gap: 0.5rem;
746
+ border-radius: 0.5rem;
747
+ background-color: hsl(204 20% 100%);
748
+ padding: 0.5rem;
749
+ box-shadow:
750
+ 0 1px 3px 0 rgb(0 0 0 / 0.1),
751
+ 0 1px 2px -1px rgb(0 0 0 / 0.1);
753
752
  }
754
753
 
755
754
  .bn-ak-wrapper:where(.dark, .dark *) {
756
- background-color: hsl(204 4% 16%);
757
- box-shadow:
758
- 0 1px 3px 0 rgb(0 0 0 / 0.25),
759
- 0 1px 2px -1px rgb(0 0 0 / 0.1);
755
+ background-color: hsl(204 4% 16%);
756
+ box-shadow:
757
+ 0 1px 3px 0 rgb(0 0 0 / 0.25),
758
+ 0 1px 2px -1px rgb(0 0 0 / 0.1);
760
759
  }
761
760
 
762
761
  .bn-ak-tab-list {
763
- display: flex;
764
- gap: 0.5rem;
762
+ display: flex;
763
+ gap: 0.5rem;
765
764
  }
766
765
 
767
766
  .bn-ak-tab {
768
- display: flex;
769
- height: 2.5rem;
770
- user-select: none;
771
- align-items: center;
772
- justify-content: center;
773
- gap: 0.5rem;
774
- white-space: nowrap;
775
- border-radius: 0.25rem;
776
- border-style: none;
777
- padding-left: 1rem;
778
- padding-right: 1rem;
779
- font-size: 1rem;
780
- line-height: 1.5rem;
781
- text-decoration-line: none;
782
- outline-width: 2px;
783
- outline-offset: 2px;
784
- outline-color: hsl(204 100% 40%);
767
+ display: flex;
768
+ height: 2.5rem;
769
+ user-select: none;
770
+ align-items: center;
771
+ justify-content: center;
772
+ gap: 0.5rem;
773
+ white-space: nowrap;
774
+ border-radius: 0.25rem;
775
+ border-style: none;
776
+ padding-left: 1rem;
777
+ padding-right: 1rem;
778
+ font-size: 1rem;
779
+ line-height: 1.5rem;
780
+ text-decoration-line: none;
781
+ outline-width: 2px;
782
+ outline-offset: 2px;
783
+ outline-color: hsl(204 100% 40%);
785
784
  }
786
785
 
787
786
  .bn-ak-tab:hover {
788
- background-color: hsl(204 4% 0% / 7.5%);
787
+ background-color: hsl(204 4% 0% / 7.5%);
789
788
  }
790
789
 
791
790
  .bn-ak-tab[aria-disabled="true"] {
792
- opacity: 0.5;
791
+ opacity: 0.5;
793
792
  }
794
793
 
795
794
  .bn-ak-tab[aria-selected="true"] {
796
- background-color: hsl(204 100% 40%);
797
- color: hsl(204 20% 100%);
795
+ background-color: hsl(204 100% 40%);
796
+ color: hsl(204 20% 100%);
798
797
  }
799
798
 
800
799
  .bn-ak-tab:hover[aria-selected="true"] {
801
- background-color: hsl(204 100% 32%);
800
+ background-color: hsl(204 100% 32%);
802
801
  }
803
802
 
804
803
  .bn-ak-tab[data-focus-visible] {
805
- outline-style: solid;
804
+ outline-style: solid;
806
805
  }
807
806
 
808
807
  .bn-ak-tab:active,
809
808
  .bn-ak-tab[data-active] {
810
- padding-top: 0.125rem;
809
+ padding-top: 0.125rem;
811
810
  }
812
811
 
813
812
  .bn-ak-tab:hover:where(.dark, .dark *) {
814
- background-color: hsl(204 20% 100% / 0.1);
813
+ background-color: hsl(204 20% 100% / 0.1);
815
814
  }
816
815
 
817
816
  .bn-ak-tab[aria-selected="true"]:where(.dark, .dark *) {
818
- background-color: hsl(204 100% 40%);
819
- color: hsl(204 20% 100%);
817
+ background-color: hsl(204 100% 40%);
818
+ color: hsl(204 20% 100%);
820
819
  }
821
820
 
822
821
  .bn-ak-tab:hover[aria-selected="true"]:where(.dark, .dark *) {
823
- background-color: hsl(204 100% 32%);
822
+ background-color: hsl(204 100% 32%);
824
823
  }
825
824
 
826
825
  .bn-ak-panels {
827
- padding: 0.5rem;
826
+ padding: 0.5rem;
828
827
  }
829
828
 
830
829
  /* https://ariakit.org/components/toolbar */
831
830
  .bn-ak-button {
832
- --border: rgb(0 0 0/13%);
833
- --highlight: rgb(255 255 255/20%);
834
- --shadow: rgb(0 0 0/10%);
835
- display: flex;
836
- height: 2.5rem;
837
- user-select: none;
838
- align-items: center;
839
- justify-content: center;
840
- white-space: nowrap;
841
- border-style: none;
842
- background-color: hsl(204 20% 100%);
843
- padding-left: 1rem;
844
- padding-right: 1rem;
845
- font-size: 1rem;
846
- line-height: 1.5rem;
847
- color: hsl(204 4% 0%);
848
- text-decoration-line: none;
849
- outline-width: 2px;
850
- outline-offset: 2px;
851
- outline-color: hsl(204 100% 40%);
852
- box-shadow:
853
- inset 0 0 0 1px var(--border),
854
- inset 0 2px 0 var(--highlight),
855
- inset 0 -1px 0 var(--shadow),
856
- 0 1px 1px var(--shadow);
857
- scroll-margin-left: 0.25rem;
858
- scroll-margin-right: 0.25rem;
859
- gap: 0.5rem;
860
- border-radius: 0.25rem;
831
+ --border: rgb(0 0 0/13%);
832
+ --highlight: rgb(255 255 255/20%);
833
+ --shadow: rgb(0 0 0/10%);
834
+ display: flex;
835
+ height: 2.5rem;
836
+ user-select: none;
837
+ align-items: center;
838
+ justify-content: center;
839
+ white-space: nowrap;
840
+ border-style: none;
841
+ background-color: hsl(204 20% 100%);
842
+ padding-left: 1rem;
843
+ padding-right: 1rem;
844
+ font-size: 1rem;
845
+ line-height: 1.5rem;
846
+ color: hsl(204 4% 0%);
847
+ text-decoration-line: none;
848
+ outline-width: 2px;
849
+ outline-offset: 2px;
850
+ outline-color: hsl(204 100% 40%);
851
+ box-shadow:
852
+ inset 0 0 0 1px var(--border),
853
+ inset 0 2px 0 var(--highlight),
854
+ inset 0 -1px 0 var(--shadow),
855
+ 0 1px 1px var(--shadow);
856
+ scroll-margin-left: 0.25rem;
857
+ scroll-margin-right: 0.25rem;
858
+ gap: 0.5rem;
859
+ border-radius: 0.25rem;
861
860
  }
862
861
 
863
862
  .bn-ak-button:where(.dark, .dark *) {
864
- --border: rgb(255 255 255/10%);
865
- --highlight: rgb(255 255 255/5%);
866
- --shadow: rgb(0 0 0/25%);
867
- background-color: hsl(204 20% 100% / 0.05);
868
- color: hsl(204 20% 100%);
869
- box-shadow:
870
- inset 0 0 0 1px var(--border),
871
- inset 0 -1px 0 1px var(--shadow),
872
- inset 0 1px 0 var(--highlight);
863
+ --border: rgb(255 255 255/10%);
864
+ --highlight: rgb(255 255 255/5%);
865
+ --shadow: rgb(0 0 0/25%);
866
+ background-color: hsl(204 20% 100% / 0.05);
867
+ color: hsl(204 20% 100%);
868
+ box-shadow:
869
+ inset 0 0 0 1px var(--border),
870
+ inset 0 -1px 0 1px var(--shadow),
871
+ inset 0 1px 0 var(--highlight);
873
872
  }
874
873
 
875
874
  .bn-ak-button:not(:active):hover {
876
- --border: rgb(0 0 0/33%);
875
+ --border: rgb(0 0 0/33%);
877
876
  }
878
877
 
879
878
  .bn-ak-button:where(.dark, .dark *):not(:active):hover {
880
- --border: rgb(255 255 255/25%);
879
+ --border: rgb(255 255 255/25%);
881
880
  }
882
881
 
883
882
  .bn-ak-button[aria-disabled="true"] {
884
- opacity: 0.5;
883
+ opacity: 0.5;
885
884
  }
886
885
 
887
886
  .bn-ak-button[data-focus-visible] {
888
- outline-style: solid;
887
+ outline-style: solid;
889
888
  }
890
889
 
891
890
  .bn-ak-button:active,
892
891
  .bn-ak-button[data-active] {
893
- padding-top: 0.125rem;
894
- box-shadow:
895
- inset 0 0 0 1px var(--border),
896
- inset 0 2px 0 var(--border);
892
+ padding-top: 0.125rem;
893
+ box-shadow:
894
+ inset 0 0 0 1px var(--border),
895
+ inset 0 2px 0 var(--border);
897
896
  }
898
897
 
899
898
  @media (min-width: 640px) {
900
- .bn-ak-button {
901
- gap: 0.5rem;
902
- }
899
+ .bn-ak-button {
900
+ gap: 0.5rem;
901
+ }
903
902
  }
904
903
 
905
904
  .bn-ak-button:active:where(.dark, .dark *),
906
905
  .bn-ak-button[data-active]:where(.dark, .dark *) {
907
- box-shadow:
908
- inset 0 0 0 1px var(--border),
909
- inset 0 1px 1px 1px var(--shadow);
906
+ box-shadow:
907
+ inset 0 0 0 1px var(--border),
908
+ inset 0 1px 1px 1px var(--shadow);
910
909
  }
911
910
 
912
911
  .bn-ak-secondary {
913
- background-color: transparent;
914
- color: currentColor;
915
- box-shadow: none;
912
+ background-color: transparent;
913
+ color: currentColor;
914
+ box-shadow: none;
916
915
  }
917
916
 
918
917
  .bn-ak-secondary:hover {
919
- background-color: hsl(204 4% 0% / 0.05);
918
+ background-color: hsl(204 4% 0% / 0.05);
920
919
  }
921
920
 
922
921
  .bn-ak-secondary:where(.dark, .dark *) {
923
- background-color: transparent;
924
- box-shadow: none;
922
+ background-color: transparent;
923
+ box-shadow: none;
925
924
  }
926
925
 
927
926
  .bn-ak-secondary:hover:where(.dark, .dark *) {
928
- background-color: hsl(204 20% 100% / 0.05);
927
+ background-color: hsl(204 20% 100% / 0.05);
929
928
  }
930
929
 
931
930
  .bn-ak-secondary:active:where(.dark, .dark *),
932
931
  .bn-ak-secondary[data-active]:where(.dark, .dark *) {
933
- box-shadow: none;
932
+ box-shadow: none;
934
933
  }
935
934
 
936
935
  .bn-ak-toolbar {
937
- display: flex;
938
- max-width: 100%;
939
- align-items: center;
940
- gap: 0.25rem;
941
- overflow-x: auto;
942
- border-radius: 0.5rem;
943
- background-color: hsl(204 20% 100%);
944
- padding: 0.25rem;
945
- box-shadow:
946
- 0 1px 3px 0 rgb(0 0 0 / 0.1),
947
- 0 1px 2px -1px rgb(0 0 0 / 0.1);
936
+ display: flex;
937
+ max-width: 100%;
938
+ align-items: center;
939
+ gap: 0.25rem;
940
+ overflow-x: auto;
941
+ border-radius: 0.5rem;
942
+ background-color: hsl(204 20% 100%);
943
+ padding: 0.25rem;
944
+ box-shadow:
945
+ 0 1px 3px 0 rgb(0 0 0 / 0.1),
946
+ 0 1px 2px -1px rgb(0 0 0 / 0.1);
948
947
  }
949
948
 
950
949
  .bn-ak-toolbar:where(.dark, .dark *) {
951
- background-color: hsl(204 4% 16%);
952
- box-shadow:
953
- 0 1px 3px 0 rgb(0 0 0 / 0.25),
954
- 0 1px 2px -1px rgb(0 0 0 / 0.1);
950
+ background-color: hsl(204 4% 16%);
951
+ box-shadow:
952
+ 0 1px 3px 0 rgb(0 0 0 / 0.25),
953
+ 0 1px 2px -1px rgb(0 0 0 / 0.1);
955
954
  }
956
955
 
957
956
  .bn-ak-separator {
958
- height: 2rem;
959
- border-right-width: 1px;
960
- border-color: hsl(204 20% 88%);
957
+ height: 2rem;
958
+ border-right-width: 1px;
959
+ border-color: hsl(204 20% 88%);
961
960
  }
962
961
 
963
962
  .bn-ak-separator:where(.dark, .dark *) {
964
- border-color: hsl(204 4% 28%);
963
+ border-color: hsl(204 4% 28%);
965
964
  }
966
965
 
967
966
  /* https://ariakit.org/components/tooltip */
968
967
  .bn-ak-tooltip {
969
- z-index: 50;
970
- cursor: default;
971
- border-radius: 0.375rem;
972
- border-width: 1px;
973
- border-color: hsl(204 20% 82%);
974
- background-color: hsl(204 20% 94%);
975
- padding-top: 0.25rem;
976
- padding-bottom: 0.25rem;
977
- padding-left: 0.5rem;
978
- padding-right: 0.5rem;
979
- font-size: 0.875rem;
980
- line-height: 1.25rem;
981
- color: black;
982
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
968
+ z-index: 50;
969
+ cursor: default;
970
+ border-radius: 0.375rem;
971
+ border-width: 1px;
972
+ border-color: hsl(204 20% 82%);
973
+ background-color: hsl(204 20% 94%);
974
+ padding-top: 0.25rem;
975
+ padding-bottom: 0.25rem;
976
+ padding-left: 0.5rem;
977
+ padding-right: 0.5rem;
978
+ font-size: 0.875rem;
979
+ line-height: 1.25rem;
980
+ color: black;
981
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
983
982
  }
984
983
 
985
984
  .bn-ak-tooltip:where(.dark, .dark *) {
986
- border-color: hsl(204 4% 24%);
987
- background-color: hsl(204 4% 16%);
988
- color: white;
989
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.15);
985
+ border-color: hsl(204 4% 24%);
986
+ background-color: hsl(204 4% 16%);
987
+ color: white;
988
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.15);
990
989
  }
991
990
 
992
991
  .bn-ak-link {
993
- font-weight: 500;
994
- color: hsl(204 100% 35%);
995
- text-decoration-line: underline;
996
- text-decoration-thickness: 1px;
997
- text-underline-offset: 0.25em;
992
+ font-weight: 500;
993
+ color: hsl(204 100% 35%);
994
+ text-decoration-line: underline;
995
+ text-decoration-thickness: 1px;
996
+ text-underline-offset: 0.25em;
998
997
  }
999
998
 
1000
999
  .bn-ak-link:hover {
1001
- text-decoration-thickness: 3px;
1000
+ text-decoration-thickness: 3px;
1002
1001
  }
1003
1002
 
1004
1003
  .bn-ak-link:where(.dark, .dark *) {
1005
- color: hsl(204 100% 64%);
1004
+ color: hsl(204 100% 64%);
1006
1005
  }
1007
1006
 
1008
1007
  /* https://ariakit.org/components/hovercard */
@@ -1061,129 +1060,129 @@ responsible for the majority of the styling. */
1061
1060
  /*}*/
1062
1061
 
1063
1062
  .bn-ak-primary {
1064
- --border: rgba(0, 0, 0, 0.15);
1065
- --highlight: rgba(255, 255, 255, 0.25);
1066
- --shadow: rgba(0, 0, 0, 0.15);
1067
- background-color: hsl(204 100% 40%);
1068
- color: white;
1063
+ --border: rgba(0, 0, 0, 0.15);
1064
+ --highlight: rgba(255, 255, 255, 0.25);
1065
+ --shadow: rgba(0, 0, 0, 0.15);
1066
+ background-color: hsl(204 100% 40%);
1067
+ color: white;
1069
1068
  }
1070
1069
 
1071
1070
  .bn-ak-primary:hover {
1072
- --border: rgba(0, 0, 0, 0.35);
1073
- background-color: hsl(204 100% 35%);
1071
+ --border: rgba(0, 0, 0, 0.35);
1072
+ background-color: hsl(204 100% 35%);
1074
1073
  }
1075
1074
 
1076
1075
  .bn-ak-primary:where(.dark, .dark *) {
1077
- --border: rgba(255, 255, 255, 0.25);
1078
- --highlight: rgba(255, 255, 255, 0.1);
1079
- --shadow: rgba(0, 0, 0, 0.25);
1080
- background-color: hsl(204 100% 35%);
1076
+ --border: rgba(255, 255, 255, 0.25);
1077
+ --highlight: rgba(255, 255, 255, 0.1);
1078
+ --shadow: rgba(0, 0, 0, 0.25);
1079
+ background-color: hsl(204 100% 35%);
1081
1080
  }
1082
1081
 
1083
1082
  .bn-ak-primary:hover:where(.dark, .dark *) {
1084
- --border: rgba(255, 255, 255, 0.45);
1085
- background-color: hsl(204 100% 40%);
1083
+ --border: rgba(255, 255, 255, 0.45);
1084
+ background-color: hsl(204 100% 40%);
1086
1085
  }
1087
1086
 
1088
1087
  .bn-ak-button[aria-disabled="true"] {
1089
- opacity: 0.5;
1088
+ opacity: 0.5;
1090
1089
  }
1091
1090
 
1092
1091
  .bn-ak-button[data-focus-visible] {
1093
- outline-style: solid;
1092
+ outline-style: solid;
1094
1093
  }
1095
1094
 
1096
1095
  .bn-ak-button:active,
1097
1096
  .bn-ak-button[data-active] {
1098
- padding-top: 0.125rem;
1099
- box-shadow:
1100
- inset 0 0 0 1px var(--border),
1101
- inset 0 2px 0 var(--border);
1097
+ padding-top: 0.125rem;
1098
+ box-shadow:
1099
+ inset 0 0 0 1px var(--border),
1100
+ inset 0 2px 0 var(--border);
1102
1101
  }
1103
1102
 
1104
1103
  @media (min-width: 640px) {
1105
- .bn-ak-button {
1106
- gap: 0.5rem;
1107
- }
1104
+ .bn-ak-button {
1105
+ gap: 0.5rem;
1106
+ }
1108
1107
  }
1109
1108
 
1110
1109
  .bn-ak-button:active:where(.dark, .dark *),
1111
1110
  .bn-ak-button[data-active]:where(.dark, .dark *) {
1112
- box-shadow:
1113
- inset 0 0 0 1px var(--border),
1114
- inset 0 1px 1px 1px var(--shadow);
1111
+ box-shadow:
1112
+ inset 0 0 0 1px var(--border),
1113
+ inset 0 1px 1px 1px var(--shadow);
1115
1114
  }
1116
1115
 
1117
1116
  .bn-ak-flat {
1118
- box-shadow: none;
1117
+ box-shadow: none;
1119
1118
  }
1120
1119
 
1121
1120
  .bn-ak-flat:where(.dark, .dark *) {
1122
- box-shadow: none;
1121
+ box-shadow: none;
1123
1122
  }
1124
1123
 
1125
1124
  .bn-ak-flat:active:where(.dark, .dark *),
1126
1125
  .bn-ak-flat[data-active]:where(.dark, .dark *) {
1127
- box-shadow: none;
1126
+ box-shadow: none;
1128
1127
  }
1129
1128
 
1130
1129
  .bn-ak-anchor {
1131
- font-weight: 500;
1132
- color: hsl(204 100% 35%);
1133
- text-decoration-line: underline;
1134
- text-underline-offset: 0.25em;
1135
- text-decoration-skip-ink: none;
1130
+ font-weight: 500;
1131
+ color: hsl(204 100% 35%);
1132
+ text-decoration-line: underline;
1133
+ text-underline-offset: 0.25em;
1134
+ text-decoration-skip-ink: none;
1136
1135
  }
1137
1136
 
1138
1137
  .bn-ak-anchor:hover {
1139
- text-decoration-thickness: 3px;
1138
+ text-decoration-thickness: 3px;
1140
1139
  }
1141
1140
 
1142
1141
  .bn-ak-anchor:where(.dark, .dark *) {
1143
- color: hsl(204 100% 64%);
1142
+ color: hsl(204 100% 64%);
1144
1143
  }
1145
1144
 
1146
1145
  .bn-ak-hovercard {
1147
- position: relative;
1148
- z-index: 50;
1149
- display: flex;
1150
- width: 300px;
1151
- flex-direction: column;
1152
- gap: 0.5rem;
1153
- border-radius: 0.5rem;
1154
- border-width: 1px;
1155
- border-style: solid;
1156
- border-color: hsl(204 20% 88%);
1157
- background-color: white;
1158
- padding: 1rem;
1159
- color: black;
1160
- box-shadow:
1161
- 0 10px 15px -3px rgb(0 0 0 / 0.1),
1162
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
1146
+ position: relative;
1147
+ z-index: 50;
1148
+ display: flex;
1149
+ width: 300px;
1150
+ flex-direction: column;
1151
+ gap: 0.5rem;
1152
+ border-radius: 0.5rem;
1153
+ border-width: 1px;
1154
+ border-style: solid;
1155
+ border-color: hsl(204 20% 88%);
1156
+ background-color: white;
1157
+ padding: 1rem;
1158
+ color: black;
1159
+ box-shadow:
1160
+ 0 10px 15px -3px rgb(0 0 0 / 0.1),
1161
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
1163
1162
  }
1164
1163
 
1165
1164
  .bn-ak-hovercard:focus-visible,
1166
1165
  .bn-ak-hovercard[data-focus-visible] {
1167
- outline: 2px solid hsl(204 100% 40%);
1168
- outline-offset: 2px;
1166
+ outline: 2px solid hsl(204 100% 40%);
1167
+ outline-offset: 2px;
1169
1168
  }
1170
1169
 
1171
1170
  .bn-ak-hovercard:where(.dark, .dark *) {
1172
- border-color: hsl(204 4% 24%);
1173
- background-color: hsl(204 4% 16%);
1174
- color: white;
1175
- box-shadow:
1176
- 0 10px 15px -3px rgb(0 0 0 / 0.25),
1177
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
1171
+ border-color: hsl(204 4% 24%);
1172
+ background-color: hsl(204 4% 16%);
1173
+ color: white;
1174
+ box-shadow:
1175
+ 0 10px 15px -3px rgb(0 0 0 / 0.25),
1176
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
1178
1177
  }
1179
1178
 
1180
1179
  .bn-ak-avatar {
1181
- width: 4rem;
1182
- border-radius: 9999px;
1180
+ width: 4rem;
1181
+ border-radius: 9999px;
1183
1182
  }
1184
1183
 
1185
1184
  .bn-ak-username {
1186
- font-size: 1.125rem;
1187
- line-height: 1.75rem;
1188
- font-weight: 600;
1189
- }
1185
+ font-size: 1.125rem;
1186
+ line-height: 1.75rem;
1187
+ font-weight: 600;
1188
+ }