@wpmoo/ui 1.0.0-rc.1 → 1.0.0-rc.3

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.
@@ -96,18 +96,18 @@
96
96
  --bs-gray-900: #212529;
97
97
  --bs-primary: #171717;
98
98
  --bs-secondary: #f4f4f5;
99
- --bs-success: #16803c;
100
- --bs-info: #0f6e8c;
101
- --bs-warning: #a15c00;
102
- --bs-danger: #dc2626;
99
+ --bs-success: #047857;
100
+ --bs-info: #0369a1;
101
+ --bs-warning: #b45309;
102
+ --bs-danger: #e7000b;
103
103
  --bs-light: #fafafa;
104
104
  --bs-dark: #18181b;
105
105
  --bs-primary-rgb: 23, 23, 23;
106
106
  --bs-secondary-rgb: 244, 244, 245;
107
- --bs-success-rgb: 22, 128, 60;
108
- --bs-info-rgb: 15, 110, 140;
109
- --bs-warning-rgb: 161, 92, 0;
110
- --bs-danger-rgb: 220, 38, 38;
107
+ --bs-success-rgb: 4, 120, 87;
108
+ --bs-info-rgb: 3, 105, 161;
109
+ --bs-warning-rgb: 180, 83, 9;
110
+ --bs-danger-rgb: 231, 0, 11;
111
111
  --bs-light-rgb: 250, 250, 250;
112
112
  --bs-dark-rgb: 24, 24, 27;
113
113
  --bs-white-rgb: 255, 255, 255;
@@ -144,18 +144,40 @@
144
144
  --moo-sidebar-foreground: var(--moo-foreground);
145
145
  --moo-sidebar-accent: var(--moo-muted-surface);
146
146
  --moo-sidebar-border: var(--moo-border);
147
+ --moo-chart-1: #52525b;
148
+ --moo-chart-2: #71717a;
149
+ --moo-chart-3: #a1a1aa;
150
+ --moo-chart-4: #3f3f46;
151
+ --moo-chart-5: #27272a;
147
152
  color-scheme: light;
148
153
  color: var(--bs-body-color);
149
154
  background-color: var(--bs-body-bg);
150
155
  --moo-surface: #fff;
151
156
  --moo-muted-surface: #f4f4f5;
152
157
  --moo-border: #e4e4e7;
158
+ --moo-primary: #171717;
159
+ --moo-primary-foreground: #fafafa;
153
160
  --moo-foreground: #18181b;
154
161
  --moo-muted-foreground: #71717a;
155
162
  --moo-disabled-foreground: #a1a1aa;
156
- --moo-ring: #18181b;
157
- --moo-destructive: #dc2626;
158
- --moo-destructive-foreground: #fff;
163
+ --moo-ring: color-mix(in srgb, #fff 60%, #171717);
164
+ --moo-destructive: #e7000b;
165
+ --moo-destructive-surface: color-mix(in srgb, #e7000b 3%, transparent);
166
+ --moo-destructive-surface-hover: color-mix(in srgb, #e7000b 6%, transparent);
167
+ --moo-destructive-foreground: #e7000b;
168
+ --moo-form-invalid-ring-color: color-mix(in srgb, #e7000b 20%, transparent);
169
+ --moo-warning: #b45309;
170
+ --moo-warning-surface: color-mix(in srgb, #b45309 10%, transparent);
171
+ --moo-warning-surface-hover: color-mix(in srgb, #b45309 20%, transparent);
172
+ --moo-warning-foreground: #b45309;
173
+ --moo-success: #047857;
174
+ --moo-success-surface: color-mix(in srgb, #047857 10%, transparent);
175
+ --moo-success-surface-hover: color-mix(in srgb, #047857 20%, transparent);
176
+ --moo-success-foreground: #047857;
177
+ --moo-info: #0369a1;
178
+ --moo-info-surface: color-mix(in srgb, #0369a1 10%, transparent);
179
+ --moo-info-surface-hover: color-mix(in srgb, #0369a1 20%, transparent);
180
+ --moo-info-foreground: #0369a1;
159
181
  --moo-sidebar: #fafafa;
160
182
  --bs-body-color: var(--moo-foreground);
161
183
  --bs-body-color-rgb: 24, 24, 27;
@@ -181,32 +203,32 @@
181
203
  --bs-highlight-bg: #fff3cd;
182
204
  --bs-border-color: var(--moo-border);
183
205
  --bs-border-color-translucent: rgba(24, 24, 27, 0.175);
184
- --bs-form-valid-color: #16803c;
185
- --bs-form-valid-border-color: #16803c;
186
- --bs-form-invalid-color: #dc2626;
187
- --bs-form-invalid-border-color: #dc2626;
206
+ --bs-form-valid-color: #047857;
207
+ --bs-form-valid-border-color: #047857;
208
+ --bs-form-invalid-color: var(--moo-destructive);
209
+ --bs-form-invalid-border-color: #e7000b;
188
210
  --bs-primary-text-emphasis: #090909;
189
211
  --bs-secondary-text-emphasis: #626262;
190
- --bs-success-text-emphasis: #093318;
191
- --bs-info-text-emphasis: #062c38;
192
- --bs-warning-text-emphasis: #402500;
193
- --bs-danger-text-emphasis: #580f0f;
212
+ --bs-success-text-emphasis: #023023;
213
+ --bs-info-text-emphasis: #012a40;
214
+ --bs-warning-text-emphasis: #482104;
215
+ --bs-danger-text-emphasis: #5c0004;
194
216
  --bs-light-text-emphasis: #495057;
195
217
  --bs-dark-text-emphasis: #495057;
196
218
  --bs-primary-bg-subtle: #d1d1d1;
197
219
  --bs-secondary-bg-subtle: #fdfdfd;
198
- --bs-success-bg-subtle: #d0e6d8;
199
- --bs-info-bg-subtle: #cfe2e8;
200
- --bs-warning-bg-subtle: #ecdecc;
201
- --bs-danger-bg-subtle: #f8d4d4;
220
+ --bs-success-bg-subtle: #cde4dd;
221
+ --bs-info-bg-subtle: #cde1ec;
222
+ --bs-warning-bg-subtle: #f0ddce;
223
+ --bs-danger-bg-subtle: #faccce;
202
224
  --bs-light-bg-subtle: #fcfcfd;
203
225
  --bs-dark-bg-subtle: #ced4da;
204
226
  --bs-primary-border-subtle: #a2a2a2;
205
227
  --bs-secondary-border-subtle: #fbfbfb;
206
- --bs-success-border-subtle: #a2ccb1;
207
- --bs-info-border-subtle: #9fc5d1;
208
- --bs-warning-border-subtle: #d9be99;
209
- --bs-danger-border-subtle: #f1a8a8;
228
+ --bs-success-border-subtle: #9bc9bc;
229
+ --bs-info-border-subtle: #9ac3d9;
230
+ --bs-warning-border-subtle: #e1ba9d;
231
+ --bs-danger-border-subtle: #f5999d;
210
232
  --bs-light-border-subtle: #e9ecef;
211
233
  --bs-dark-border-subtle: #adb5bd;
212
234
  }
@@ -215,20 +237,37 @@
215
237
  color-scheme: dark;
216
238
  color: var(--bs-body-color);
217
239
  background-color: var(--bs-body-bg);
218
- --moo-surface: #18181b;
240
+ --moo-surface: #0a0a0a;
219
241
  --moo-muted-surface: #27272a;
220
242
  --moo-border: #3f3f46;
243
+ --moo-primary: #e4e4e7;
244
+ --moo-primary-foreground: #18181b;
221
245
  --moo-foreground: #fafafa;
222
246
  --moo-muted-foreground: #a1a1aa;
223
247
  --moo-disabled-foreground: #71717a;
224
- --moo-ring: #fafafa;
225
- --moo-destructive: #f87171;
226
- --moo-destructive-foreground: #18181b;
248
+ --moo-ring: color-mix(in srgb, #fff 40%, #171717);
249
+ --moo-destructive: #ff6467;
250
+ --moo-destructive-surface: color-mix(in srgb, #ff6467 20%, transparent);
251
+ --moo-destructive-surface-hover: color-mix(in srgb, #ff6467 30%, transparent);
252
+ --moo-destructive-foreground: #ff6467;
253
+ --moo-form-invalid-ring-color: color-mix(in srgb, #ff6467 40%, transparent);
254
+ --moo-warning: color-mix(in srgb, #fafafa 60%, #b45309);
255
+ --moo-warning-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #b45309) 20%, transparent);
256
+ --moo-warning-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #b45309) 30%, transparent);
257
+ --moo-warning-foreground: color-mix(in srgb, #fafafa 60%, #b45309);
258
+ --moo-success: color-mix(in srgb, #fafafa 60%, #047857);
259
+ --moo-success-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #047857) 20%, transparent);
260
+ --moo-success-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #047857) 30%, transparent);
261
+ --moo-success-foreground: color-mix(in srgb, #fafafa 60%, #047857);
262
+ --moo-info: color-mix(in srgb, #fafafa 60%, #0369a1);
263
+ --moo-info-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #0369a1) 20%, transparent);
264
+ --moo-info-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #0369a1) 30%, transparent);
265
+ --moo-info-foreground: color-mix(in srgb, #fafafa 60%, #0369a1);
227
266
  --moo-sidebar: #1c1c1f;
228
267
  --bs-body-color: var(--moo-foreground);
229
268
  --bs-body-color-rgb: 250, 250, 250;
230
269
  --bs-body-bg: var(--moo-surface);
231
- --bs-body-bg-rgb: 24, 24, 27;
270
+ --bs-body-bg-rgb: 10, 10, 10;
232
271
  --bs-emphasis-color: var(--moo-foreground);
233
272
  --bs-emphasis-color-rgb: 250, 250, 250;
234
273
  --bs-secondary-color: var(--moo-muted-foreground);
@@ -251,30 +290,30 @@
251
290
  --bs-border-color-translucent: rgba(250, 250, 250, 0.15);
252
291
  --bs-form-valid-color: #75b798;
253
292
  --bs-form-valid-border-color: #75b798;
254
- --bs-form-invalid-color: #ea868f;
255
- --bs-form-invalid-border-color: #ea868f;
293
+ --bs-form-invalid-color: var(--moo-destructive);
294
+ --bs-form-invalid-border-color: color-mix(in srgb, #ff6467 50%, transparent);
256
295
  --bs-primary-text-emphasis: #747474;
257
296
  --bs-secondary-text-emphasis: #f8f8f9;
258
- --bs-success-text-emphasis: #73b38a;
259
- --bs-info-text-emphasis: #6fa8ba;
260
- --bs-warning-text-emphasis: #c79d66;
261
- --bs-danger-text-emphasis: #ea7d7d;
297
+ --bs-success-text-emphasis: #68ae9a;
298
+ --bs-info-text-emphasis: #68a5c7;
299
+ --bs-warning-text-emphasis: #d2986b;
300
+ --bs-danger-text-emphasis: #f1666d;
262
301
  --bs-light-text-emphasis: #f8f9fa;
263
302
  --bs-dark-text-emphasis: #dee2e6;
264
303
  --bs-primary-bg-subtle: #050505;
265
304
  --bs-secondary-bg-subtle: #313131;
266
- --bs-success-bg-subtle: #041a0c;
267
- --bs-info-bg-subtle: #03161c;
268
- --bs-warning-bg-subtle: #201200;
269
- --bs-danger-bg-subtle: #2c0808;
305
+ --bs-success-bg-subtle: #011811;
306
+ --bs-info-bg-subtle: #011520;
307
+ --bs-warning-bg-subtle: #241102;
308
+ --bs-danger-bg-subtle: #2e0002;
270
309
  --bs-light-bg-subtle: #343a40;
271
310
  --bs-dark-bg-subtle: #1f2225;
272
311
  --bs-primary-border-subtle: #0e0e0e;
273
312
  --bs-secondary-border-subtle: #929293;
274
- --bs-success-border-subtle: #0d4d24;
275
- --bs-info-border-subtle: #094254;
276
- --bs-warning-border-subtle: #613700;
277
- --bs-danger-border-subtle: #841717;
313
+ --bs-success-border-subtle: #024834;
314
+ --bs-info-border-subtle: #023f61;
315
+ --bs-warning-border-subtle: #6c3205;
316
+ --bs-danger-border-subtle: #8b0007;
278
317
  --bs-light-border-subtle: #495057;
279
318
  --bs-dark-border-subtle: #343a40;
280
319
  }
@@ -286,12 +325,29 @@
286
325
  --moo-surface: #fff;
287
326
  --moo-muted-surface: #f4f4f5;
288
327
  --moo-border: #e4e4e7;
328
+ --moo-primary: #171717;
329
+ --moo-primary-foreground: #fafafa;
289
330
  --moo-foreground: #18181b;
290
331
  --moo-muted-foreground: #71717a;
291
332
  --moo-disabled-foreground: #a1a1aa;
292
- --moo-ring: #18181b;
293
- --moo-destructive: #dc2626;
294
- --moo-destructive-foreground: #fff;
333
+ --moo-ring: color-mix(in srgb, #fff 60%, #171717);
334
+ --moo-destructive: #e7000b;
335
+ --moo-destructive-surface: color-mix(in srgb, #e7000b 3%, transparent);
336
+ --moo-destructive-surface-hover: color-mix(in srgb, #e7000b 6%, transparent);
337
+ --moo-destructive-foreground: #e7000b;
338
+ --moo-form-invalid-ring-color: color-mix(in srgb, #e7000b 20%, transparent);
339
+ --moo-warning: #b45309;
340
+ --moo-warning-surface: color-mix(in srgb, #b45309 10%, transparent);
341
+ --moo-warning-surface-hover: color-mix(in srgb, #b45309 20%, transparent);
342
+ --moo-warning-foreground: #b45309;
343
+ --moo-success: #047857;
344
+ --moo-success-surface: color-mix(in srgb, #047857 10%, transparent);
345
+ --moo-success-surface-hover: color-mix(in srgb, #047857 20%, transparent);
346
+ --moo-success-foreground: #047857;
347
+ --moo-info: #0369a1;
348
+ --moo-info-surface: color-mix(in srgb, #0369a1 10%, transparent);
349
+ --moo-info-surface-hover: color-mix(in srgb, #0369a1 20%, transparent);
350
+ --moo-info-foreground: #0369a1;
295
351
  --moo-sidebar: #fafafa;
296
352
  --bs-body-color: var(--moo-foreground);
297
353
  --bs-body-color-rgb: 24, 24, 27;
@@ -317,32 +373,32 @@
317
373
  --bs-highlight-bg: #fff3cd;
318
374
  --bs-border-color: var(--moo-border);
319
375
  --bs-border-color-translucent: rgba(24, 24, 27, 0.175);
320
- --bs-form-valid-color: #16803c;
321
- --bs-form-valid-border-color: #16803c;
322
- --bs-form-invalid-color: #dc2626;
323
- --bs-form-invalid-border-color: #dc2626;
376
+ --bs-form-valid-color: #047857;
377
+ --bs-form-valid-border-color: #047857;
378
+ --bs-form-invalid-color: var(--moo-destructive);
379
+ --bs-form-invalid-border-color: #e7000b;
324
380
  --bs-primary-text-emphasis: #090909;
325
381
  --bs-secondary-text-emphasis: #626262;
326
- --bs-success-text-emphasis: #093318;
327
- --bs-info-text-emphasis: #062c38;
328
- --bs-warning-text-emphasis: #402500;
329
- --bs-danger-text-emphasis: #580f0f;
382
+ --bs-success-text-emphasis: #023023;
383
+ --bs-info-text-emphasis: #012a40;
384
+ --bs-warning-text-emphasis: #482104;
385
+ --bs-danger-text-emphasis: #5c0004;
330
386
  --bs-light-text-emphasis: #495057;
331
387
  --bs-dark-text-emphasis: #495057;
332
388
  --bs-primary-bg-subtle: #d1d1d1;
333
389
  --bs-secondary-bg-subtle: #fdfdfd;
334
- --bs-success-bg-subtle: #d0e6d8;
335
- --bs-info-bg-subtle: #cfe2e8;
336
- --bs-warning-bg-subtle: #ecdecc;
337
- --bs-danger-bg-subtle: #f8d4d4;
390
+ --bs-success-bg-subtle: #cde4dd;
391
+ --bs-info-bg-subtle: #cde1ec;
392
+ --bs-warning-bg-subtle: #f0ddce;
393
+ --bs-danger-bg-subtle: #faccce;
338
394
  --bs-light-bg-subtle: #fcfcfd;
339
395
  --bs-dark-bg-subtle: #ced4da;
340
396
  --bs-primary-border-subtle: #a2a2a2;
341
397
  --bs-secondary-border-subtle: #fbfbfb;
342
- --bs-success-border-subtle: #a2ccb1;
343
- --bs-info-border-subtle: #9fc5d1;
344
- --bs-warning-border-subtle: #d9be99;
345
- --bs-danger-border-subtle: #f1a8a8;
398
+ --bs-success-border-subtle: #9bc9bc;
399
+ --bs-info-border-subtle: #9ac3d9;
400
+ --bs-warning-border-subtle: #e1ba9d;
401
+ --bs-danger-border-subtle: #f5999d;
346
402
  --bs-light-border-subtle: #e9ecef;
347
403
  --bs-dark-border-subtle: #adb5bd;
348
404
  }
@@ -351,20 +407,37 @@
351
407
  color-scheme: dark;
352
408
  color: var(--bs-body-color);
353
409
  background-color: var(--bs-body-bg);
354
- --moo-surface: #18181b;
410
+ --moo-surface: #0a0a0a;
355
411
  --moo-muted-surface: #27272a;
356
412
  --moo-border: #3f3f46;
413
+ --moo-primary: #e4e4e7;
414
+ --moo-primary-foreground: #18181b;
357
415
  --moo-foreground: #fafafa;
358
416
  --moo-muted-foreground: #a1a1aa;
359
417
  --moo-disabled-foreground: #71717a;
360
- --moo-ring: #fafafa;
361
- --moo-destructive: #f87171;
362
- --moo-destructive-foreground: #18181b;
418
+ --moo-ring: color-mix(in srgb, #fff 40%, #171717);
419
+ --moo-destructive: #ff6467;
420
+ --moo-destructive-surface: color-mix(in srgb, #ff6467 20%, transparent);
421
+ --moo-destructive-surface-hover: color-mix(in srgb, #ff6467 30%, transparent);
422
+ --moo-destructive-foreground: #ff6467;
423
+ --moo-form-invalid-ring-color: color-mix(in srgb, #ff6467 40%, transparent);
424
+ --moo-warning: color-mix(in srgb, #fafafa 60%, #b45309);
425
+ --moo-warning-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #b45309) 20%, transparent);
426
+ --moo-warning-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #b45309) 30%, transparent);
427
+ --moo-warning-foreground: color-mix(in srgb, #fafafa 60%, #b45309);
428
+ --moo-success: color-mix(in srgb, #fafafa 60%, #047857);
429
+ --moo-success-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #047857) 20%, transparent);
430
+ --moo-success-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #047857) 30%, transparent);
431
+ --moo-success-foreground: color-mix(in srgb, #fafafa 60%, #047857);
432
+ --moo-info: color-mix(in srgb, #fafafa 60%, #0369a1);
433
+ --moo-info-surface: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #0369a1) 20%, transparent);
434
+ --moo-info-surface-hover: color-mix(in srgb, color-mix(in srgb, #fafafa 60%, #0369a1) 30%, transparent);
435
+ --moo-info-foreground: color-mix(in srgb, #fafafa 60%, #0369a1);
363
436
  --moo-sidebar: #1c1c1f;
364
437
  --bs-body-color: var(--moo-foreground);
365
438
  --bs-body-color-rgb: 250, 250, 250;
366
439
  --bs-body-bg: var(--moo-surface);
367
- --bs-body-bg-rgb: 24, 24, 27;
440
+ --bs-body-bg-rgb: 10, 10, 10;
368
441
  --bs-emphasis-color: var(--moo-foreground);
369
442
  --bs-emphasis-color-rgb: 250, 250, 250;
370
443
  --bs-secondary-color: var(--moo-muted-foreground);
@@ -387,30 +460,30 @@
387
460
  --bs-border-color-translucent: rgba(250, 250, 250, 0.15);
388
461
  --bs-form-valid-color: #75b798;
389
462
  --bs-form-valid-border-color: #75b798;
390
- --bs-form-invalid-color: #ea868f;
391
- --bs-form-invalid-border-color: #ea868f;
463
+ --bs-form-invalid-color: var(--moo-destructive);
464
+ --bs-form-invalid-border-color: color-mix(in srgb, #ff6467 50%, transparent);
392
465
  --bs-primary-text-emphasis: #747474;
393
466
  --bs-secondary-text-emphasis: #f8f8f9;
394
- --bs-success-text-emphasis: #73b38a;
395
- --bs-info-text-emphasis: #6fa8ba;
396
- --bs-warning-text-emphasis: #c79d66;
397
- --bs-danger-text-emphasis: #ea7d7d;
467
+ --bs-success-text-emphasis: #68ae9a;
468
+ --bs-info-text-emphasis: #68a5c7;
469
+ --bs-warning-text-emphasis: #d2986b;
470
+ --bs-danger-text-emphasis: #f1666d;
398
471
  --bs-light-text-emphasis: #f8f9fa;
399
472
  --bs-dark-text-emphasis: #dee2e6;
400
473
  --bs-primary-bg-subtle: #050505;
401
474
  --bs-secondary-bg-subtle: #313131;
402
- --bs-success-bg-subtle: #041a0c;
403
- --bs-info-bg-subtle: #03161c;
404
- --bs-warning-bg-subtle: #201200;
405
- --bs-danger-bg-subtle: #2c0808;
475
+ --bs-success-bg-subtle: #011811;
476
+ --bs-info-bg-subtle: #011520;
477
+ --bs-warning-bg-subtle: #241102;
478
+ --bs-danger-bg-subtle: #2e0002;
406
479
  --bs-light-bg-subtle: #343a40;
407
480
  --bs-dark-bg-subtle: #1f2225;
408
481
  --bs-primary-border-subtle: #0e0e0e;
409
482
  --bs-secondary-border-subtle: #929293;
410
- --bs-success-border-subtle: #0d4d24;
411
- --bs-info-border-subtle: #094254;
412
- --bs-warning-border-subtle: #613700;
413
- --bs-danger-border-subtle: #841717;
483
+ --bs-success-border-subtle: #024834;
484
+ --bs-info-border-subtle: #023f61;
485
+ --bs-warning-border-subtle: #6c3205;
486
+ --bs-danger-border-subtle: #8b0007;
414
487
  --bs-light-border-subtle: #495057;
415
488
  --bs-dark-border-subtle: #343a40;
416
489
  }
@@ -518,52 +591,52 @@
518
591
  }
519
592
  .table-success {
520
593
  --bs-table-color: #0a0a0a;
521
- --bs-table-bg: #d0e6d8;
522
- --bs-table-border-color: #a8baaf;
523
- --bs-table-striped-bg: #c6dbce;
594
+ --bs-table-bg: #cde4dd;
595
+ --bs-table-border-color: #a6b8b3;
596
+ --bs-table-striped-bg: #c3d9d2;
524
597
  --bs-table-striped-color: #0a0a0a;
525
- --bs-table-active-bg: #bcd0c3;
598
+ --bs-table-active-bg: #bacec8;
526
599
  --bs-table-active-color: #0a0a0a;
527
- --bs-table-hover-bg: #c1d6c9;
600
+ --bs-table-hover-bg: #bed4cd;
528
601
  --bs-table-hover-color: #0a0a0a;
529
602
  color: var(--bs-table-color);
530
603
  border-color: var(--bs-table-border-color);
531
604
  }
532
605
  .table-info {
533
606
  --bs-table-color: #0a0a0a;
534
- --bs-table-bg: #cfe2e8;
535
- --bs-table-border-color: #a8b7bc;
536
- --bs-table-striped-bg: #c5d7dd;
607
+ --bs-table-bg: #cde1ec;
608
+ --bs-table-border-color: #a6b6bf;
609
+ --bs-table-striped-bg: #c3d6e1;
537
610
  --bs-table-striped-color: #0a0a0a;
538
- --bs-table-active-bg: #bbccd2;
611
+ --bs-table-active-bg: #baccd5;
539
612
  --bs-table-active-color: #0a0a0a;
540
- --bs-table-hover-bg: #c0d2d7;
613
+ --bs-table-hover-bg: #bed1db;
541
614
  --bs-table-hover-color: #0a0a0a;
542
615
  color: var(--bs-table-color);
543
616
  border-color: var(--bs-table-border-color);
544
617
  }
545
618
  .table-warning {
546
619
  --bs-table-color: #0a0a0a;
547
- --bs-table-bg: #ecdecc;
548
- --bs-table-border-color: #bfb4a5;
549
- --bs-table-striped-bg: #e1d3c2;
620
+ --bs-table-bg: #f0ddce;
621
+ --bs-table-border-color: #c2b3a7;
622
+ --bs-table-striped-bg: #e5d2c4;
550
623
  --bs-table-striped-color: #0a0a0a;
551
- --bs-table-active-bg: #d5c9b9;
624
+ --bs-table-active-bg: #d9c8ba;
552
625
  --bs-table-active-color: #0a0a0a;
553
- --bs-table-hover-bg: #dbcebd;
626
+ --bs-table-hover-bg: #dfcdbf;
554
627
  --bs-table-hover-color: #0a0a0a;
555
628
  color: var(--bs-table-color);
556
629
  border-color: var(--bs-table-border-color);
557
630
  }
558
631
  .table-danger {
559
632
  --bs-table-color: #0a0a0a;
560
- --bs-table-bg: #f8d4d4;
561
- --bs-table-border-color: #c8acac;
562
- --bs-table-striped-bg: #eccaca;
633
+ --bs-table-bg: #faccce;
634
+ --bs-table-border-color: #caa5a7;
635
+ --bs-table-striped-bg: #eec2c4;
563
636
  --bs-table-striped-color: #0a0a0a;
564
- --bs-table-active-bg: #e0c0c0;
637
+ --bs-table-active-bg: #e2b9ba;
565
638
  --bs-table-active-color: #0a0a0a;
566
- --bs-table-hover-bg: #e6c5c5;
639
+ --bs-table-hover-bg: #e8bdbf;
567
640
  --bs-table-hover-color: #0a0a0a;
568
641
  color: var(--bs-table-color);
569
642
  border-color: var(--bs-table-border-color);
@@ -667,7 +740,7 @@
667
740
  line-height: 1.42857;
668
741
  color: var(--bs-body-color);
669
742
  appearance: none;
670
- background-color: transparent;
743
+ background-color: var(--moo-input-bg, transparent);
671
744
  background-clip: padding-box;
672
745
  border: var(--bs-border-width) solid var(--moo-border);
673
746
  border-radius: 0.625rem;
@@ -686,7 +759,7 @@
686
759
  }
687
760
  .form-control:focus {
688
761
  color: var(--bs-body-color);
689
- background-color: transparent;
762
+ background-color: var(--moo-input-bg, transparent);
690
763
  border-color: #8b8b8b;
691
764
  outline: 0;
692
765
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.25);
@@ -817,7 +890,7 @@
817
890
  line-height: 1.42857;
818
891
  color: var(--bs-body-color);
819
892
  appearance: none;
820
- background-color: transparent;
893
+ background-color: var(--moo-input-bg, transparent);
821
894
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
822
895
  background-repeat: no-repeat;
823
896
  background-position: right 0.625rem center;
@@ -870,29 +943,29 @@
870
943
  .form-check {
871
944
  display: block;
872
945
  min-height: 1.3125rem;
873
- padding-left: 1.5em;
946
+ padding-left: 1.5rem;
874
947
  margin-bottom: 0.125rem;
875
948
  }
876
949
  .form-check .form-check-input {
877
950
  float: left;
878
- margin-left: -1.5em;
951
+ margin-left: -1.5rem;
879
952
  }
880
953
  .form-check-reverse {
881
- padding-right: 1.5em;
954
+ padding-right: 1.5rem;
882
955
  padding-left: 0;
883
956
  text-align: right;
884
957
  }
885
958
  .form-check-reverse .form-check-input {
886
959
  float: right;
887
- margin-right: -1.5em;
960
+ margin-right: -1.5rem;
888
961
  margin-left: 0;
889
962
  }
890
963
  .form-check-input {
891
- --bs-form-check-bg: transparent;
964
+ --bs-form-check-bg: var(--moo-input-bg, transparent);
892
965
  flex-shrink: 0;
893
- width: 1em;
894
- height: 1em;
895
- margin-top: 0.25em;
966
+ width: 1rem;
967
+ height: 1rem;
968
+ margin-top: 0.25rem;
896
969
  vertical-align: top;
897
970
  appearance: none;
898
971
  background-color: var(--bs-form-check-bg);
@@ -918,8 +991,8 @@
918
991
  box-shadow: 0 0 0 var(--bs-focus-ring-width) color-mix(in srgb, var(--moo-ring) 50%, transparent);
919
992
  }
920
993
  .form-check-input:checked {
921
- background-color: #171717;
922
- border-color: #171717;
994
+ background-color: var(--moo-primary);
995
+ border-color: var(--moo-primary);
923
996
  }
924
997
  .form-check-input:checked[type="checkbox"] {
925
998
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -928,8 +1001,8 @@
928
1001
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
929
1002
  }
930
1003
  .form-check-input[type="checkbox"]:indeterminate {
931
- background-color: #171717;
932
- border-color: #171717;
1004
+ background-color: var(--moo-primary);
1005
+ border-color: var(--moo-primary);
933
1006
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
934
1007
  }
935
1008
  .form-check-input:disabled {
@@ -1024,7 +1097,7 @@
1024
1097
  color: var(--bs-body-color);
1025
1098
  text-align: center;
1026
1099
  white-space: nowrap;
1027
- background-color: var(--bs-tertiary-bg);
1100
+ background-color: var(--moo-input-bg, transparent);
1028
1101
  border: var(--bs-border-width) solid var(--moo-border);
1029
1102
  border-radius: 0.625rem;
1030
1103
  }
@@ -1113,36 +1186,18 @@
1113
1186
  }
1114
1187
  .was-validated .form-control:valid, .form-control.is-valid {
1115
1188
  border-color: var(--bs-form-valid-border-color);
1116
- padding-right: calc(1.42857em + 0.5rem);
1117
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2316803c' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
1118
- background-repeat: no-repeat;
1119
- background-position: right calc(0.35714em + 0.125rem) center;
1120
- background-size: calc(0.71429em + 0.25rem) calc(0.71429em + 0.25rem);
1121
1189
  }
1122
1190
  .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
1123
1191
  border-color: var(--bs-form-valid-border-color);
1124
1192
  box-shadow: 0 0 0 2px rgba(var(--bs-success-rgb), 0.25);
1125
1193
  }
1126
- .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
1127
- padding-right: calc(1.42857em + 0.5rem);
1128
- background-position: top calc(0.35714em + 0.125rem) right calc(0.35714em + 0.125rem);
1129
- }
1130
1194
  .was-validated .form-select:valid, .form-select.is-valid {
1131
1195
  border-color: var(--bs-form-valid-border-color);
1132
1196
  }
1133
- .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
1134
- --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2316803c' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
1135
- padding-right: 3.4375rem;
1136
- background-position: right 0.625rem center, center right 1.875rem;
1137
- background-size: 16px 12px, calc(0.71429em + 0.25rem) calc(0.71429em + 0.25rem);
1138
- }
1139
1197
  .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
1140
1198
  border-color: var(--bs-form-valid-border-color);
1141
1199
  box-shadow: 0 0 0 2px rgba(var(--bs-success-rgb), 0.25);
1142
1200
  }
1143
- .was-validated .form-control-color:valid, .form-control-color.is-valid {
1144
- width: calc(3rem + calc(1.42857em + 0.5rem));
1145
- }
1146
1201
  .was-validated .form-check-input:valid, .form-check-input.is-valid {
1147
1202
  border-color: var(--bs-form-valid-border-color);
1148
1203
  }
@@ -1196,36 +1251,18 @@
1196
1251
  }
1197
1252
  .was-validated .form-control:invalid, .form-control.is-invalid {
1198
1253
  border-color: var(--bs-form-invalid-border-color);
1199
- padding-right: calc(1.42857em + 0.5rem);
1200
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc2626'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc2626' stroke='none'/%3e%3c/svg%3e");
1201
- background-repeat: no-repeat;
1202
- background-position: right calc(0.35714em + 0.125rem) center;
1203
- background-size: calc(0.71429em + 0.25rem) calc(0.71429em + 0.25rem);
1204
1254
  }
1205
1255
  .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
1206
1256
  border-color: var(--bs-form-invalid-border-color);
1207
1257
  box-shadow: 0 0 0 2px rgba(var(--bs-danger-rgb), 0.25);
1208
1258
  }
1209
- .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
1210
- padding-right: calc(1.42857em + 0.5rem);
1211
- background-position: top calc(0.35714em + 0.125rem) right calc(0.35714em + 0.125rem);
1212
- }
1213
1259
  .was-validated .form-select:invalid, .form-select.is-invalid {
1214
1260
  border-color: var(--bs-form-invalid-border-color);
1215
1261
  }
1216
- .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
1217
- --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc2626'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc2626' stroke='none'/%3e%3c/svg%3e");
1218
- padding-right: 3.4375rem;
1219
- background-position: right 0.625rem center, center right 1.875rem;
1220
- background-size: 16px 12px, calc(0.71429em + 0.25rem) calc(0.71429em + 0.25rem);
1221
- }
1222
1262
  .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
1223
1263
  border-color: var(--bs-form-invalid-border-color);
1224
1264
  box-shadow: 0 0 0 2px rgba(var(--bs-danger-rgb), 0.25);
1225
1265
  }
1226
- .was-validated .form-control-color:invalid, .form-control-color.is-invalid {
1227
- width: calc(3rem + calc(1.42857em + 0.5rem));
1228
- }
1229
1266
  .was-validated .form-check-input:invalid, .form-check-input.is-invalid {
1230
1267
  border-color: var(--bs-form-invalid-border-color);
1231
1268
  }
@@ -1358,67 +1395,67 @@
1358
1395
  }
1359
1396
  .btn-success {
1360
1397
  --bs-btn-color: #fff;
1361
- --bs-btn-bg: #16803c;
1362
- --bs-btn-border-color: #16803c;
1398
+ --bs-btn-bg: #047857;
1399
+ --bs-btn-border-color: #047857;
1363
1400
  --bs-btn-hover-color: #fff;
1364
- --bs-btn-hover-bg: #136d33;
1365
- --bs-btn-hover-border-color: #126630;
1366
- --bs-btn-focus-shadow-rgb: 57, 147, 89;
1401
+ --bs-btn-hover-bg: #03664a;
1402
+ --bs-btn-hover-border-color: #036046;
1403
+ --bs-btn-focus-shadow-rgb: 42, 140, 112;
1367
1404
  --bs-btn-active-color: #fff;
1368
- --bs-btn-active-bg: #126630;
1369
- --bs-btn-active-border-color: #11602d;
1405
+ --bs-btn-active-bg: #036046;
1406
+ --bs-btn-active-border-color: #035a41;
1370
1407
  --bs-btn-active-shadow: none;
1371
1408
  --bs-btn-disabled-color: #fff;
1372
- --bs-btn-disabled-bg: #16803c;
1373
- --bs-btn-disabled-border-color: #16803c;
1409
+ --bs-btn-disabled-bg: #047857;
1410
+ --bs-btn-disabled-border-color: #047857;
1374
1411
  }
1375
1412
  .btn-info {
1376
1413
  --bs-btn-color: #fff;
1377
- --bs-btn-bg: #0f6e8c;
1378
- --bs-btn-border-color: #0f6e8c;
1414
+ --bs-btn-bg: #0369a1;
1415
+ --bs-btn-border-color: #0369a1;
1379
1416
  --bs-btn-hover-color: #fff;
1380
- --bs-btn-hover-bg: #0d5e77;
1381
- --bs-btn-hover-border-color: #0c5870;
1382
- --bs-btn-focus-shadow-rgb: 51, 132, 157;
1417
+ --bs-btn-hover-bg: #035989;
1418
+ --bs-btn-hover-border-color: #025481;
1419
+ --bs-btn-focus-shadow-rgb: 41, 128, 175;
1383
1420
  --bs-btn-active-color: #fff;
1384
- --bs-btn-active-bg: #0c5870;
1385
- --bs-btn-active-border-color: #0b5369;
1421
+ --bs-btn-active-bg: #025481;
1422
+ --bs-btn-active-border-color: #024f79;
1386
1423
  --bs-btn-active-shadow: none;
1387
1424
  --bs-btn-disabled-color: #fff;
1388
- --bs-btn-disabled-bg: #0f6e8c;
1389
- --bs-btn-disabled-border-color: #0f6e8c;
1425
+ --bs-btn-disabled-bg: #0369a1;
1426
+ --bs-btn-disabled-border-color: #0369a1;
1390
1427
  }
1391
1428
  .btn-warning {
1392
1429
  --bs-btn-color: #fff;
1393
- --bs-btn-bg: #a15c00;
1394
- --bs-btn-border-color: #a15c00;
1430
+ --bs-btn-bg: #b45309;
1431
+ --bs-btn-border-color: #b45309;
1395
1432
  --bs-btn-hover-color: #fff;
1396
- --bs-btn-hover-bg: #894e00;
1397
- --bs-btn-hover-border-color: #814a00;
1398
- --bs-btn-focus-shadow-rgb: 175, 116, 38;
1433
+ --bs-btn-hover-bg: #994708;
1434
+ --bs-btn-hover-border-color: #904207;
1435
+ --bs-btn-focus-shadow-rgb: 191, 109, 46;
1399
1436
  --bs-btn-active-color: #fff;
1400
- --bs-btn-active-bg: #814a00;
1401
- --bs-btn-active-border-color: #794500;
1437
+ --bs-btn-active-bg: #904207;
1438
+ --bs-btn-active-border-color: #873e07;
1402
1439
  --bs-btn-active-shadow: none;
1403
1440
  --bs-btn-disabled-color: #fff;
1404
- --bs-btn-disabled-bg: #a15c00;
1405
- --bs-btn-disabled-border-color: #a15c00;
1441
+ --bs-btn-disabled-bg: #b45309;
1442
+ --bs-btn-disabled-border-color: #b45309;
1406
1443
  }
1407
1444
  .btn-danger {
1408
1445
  --bs-btn-color: #fff;
1409
- --bs-btn-bg: #dc2626;
1410
- --bs-btn-border-color: #dc2626;
1446
+ --bs-btn-bg: #e7000b;
1447
+ --bs-btn-border-color: #e7000b;
1411
1448
  --bs-btn-hover-color: #fff;
1412
- --bs-btn-hover-bg: #bb2020;
1413
- --bs-btn-hover-border-color: #b01e1e;
1414
- --bs-btn-focus-shadow-rgb: 225, 71, 71;
1449
+ --bs-btn-hover-bg: #c40009;
1450
+ --bs-btn-hover-border-color: #b90009;
1451
+ --bs-btn-focus-shadow-rgb: 235, 38, 48;
1415
1452
  --bs-btn-active-color: #fff;
1416
- --bs-btn-active-bg: #b01e1e;
1417
- --bs-btn-active-border-color: #a51d1d;
1453
+ --bs-btn-active-bg: #b90009;
1454
+ --bs-btn-active-border-color: #ad0008;
1418
1455
  --bs-btn-active-shadow: none;
1419
1456
  --bs-btn-disabled-color: #fff;
1420
- --bs-btn-disabled-bg: #dc2626;
1421
- --bs-btn-disabled-border-color: #dc2626;
1457
+ --bs-btn-disabled-bg: #e7000b;
1458
+ --bs-btn-disabled-border-color: #e7000b;
1422
1459
  }
1423
1460
  .btn-light {
1424
1461
  --bs-btn-color: #0a0a0a;
@@ -1485,67 +1522,67 @@
1485
1522
  --bs-gradient: none;
1486
1523
  }
1487
1524
  .btn-outline-success {
1488
- --bs-btn-color: #16803c;
1489
- --bs-btn-border-color: #16803c;
1525
+ --bs-btn-color: #047857;
1526
+ --bs-btn-border-color: #047857;
1490
1527
  --bs-btn-hover-color: #fff;
1491
- --bs-btn-hover-bg: #16803c;
1492
- --bs-btn-hover-border-color: #16803c;
1493
- --bs-btn-focus-shadow-rgb: 22, 128, 60;
1528
+ --bs-btn-hover-bg: #047857;
1529
+ --bs-btn-hover-border-color: #047857;
1530
+ --bs-btn-focus-shadow-rgb: 4, 120, 87;
1494
1531
  --bs-btn-active-color: #fff;
1495
- --bs-btn-active-bg: #16803c;
1496
- --bs-btn-active-border-color: #16803c;
1532
+ --bs-btn-active-bg: #047857;
1533
+ --bs-btn-active-border-color: #047857;
1497
1534
  --bs-btn-active-shadow: none;
1498
- --bs-btn-disabled-color: #16803c;
1535
+ --bs-btn-disabled-color: #047857;
1499
1536
  --bs-btn-disabled-bg: transparent;
1500
- --bs-btn-disabled-border-color: #16803c;
1537
+ --bs-btn-disabled-border-color: #047857;
1501
1538
  --bs-gradient: none;
1502
1539
  }
1503
1540
  .btn-outline-info {
1504
- --bs-btn-color: #0f6e8c;
1505
- --bs-btn-border-color: #0f6e8c;
1541
+ --bs-btn-color: #0369a1;
1542
+ --bs-btn-border-color: #0369a1;
1506
1543
  --bs-btn-hover-color: #fff;
1507
- --bs-btn-hover-bg: #0f6e8c;
1508
- --bs-btn-hover-border-color: #0f6e8c;
1509
- --bs-btn-focus-shadow-rgb: 15, 110, 140;
1544
+ --bs-btn-hover-bg: #0369a1;
1545
+ --bs-btn-hover-border-color: #0369a1;
1546
+ --bs-btn-focus-shadow-rgb: 3, 105, 161;
1510
1547
  --bs-btn-active-color: #fff;
1511
- --bs-btn-active-bg: #0f6e8c;
1512
- --bs-btn-active-border-color: #0f6e8c;
1548
+ --bs-btn-active-bg: #0369a1;
1549
+ --bs-btn-active-border-color: #0369a1;
1513
1550
  --bs-btn-active-shadow: none;
1514
- --bs-btn-disabled-color: #0f6e8c;
1551
+ --bs-btn-disabled-color: #0369a1;
1515
1552
  --bs-btn-disabled-bg: transparent;
1516
- --bs-btn-disabled-border-color: #0f6e8c;
1553
+ --bs-btn-disabled-border-color: #0369a1;
1517
1554
  --bs-gradient: none;
1518
1555
  }
1519
1556
  .btn-outline-warning {
1520
- --bs-btn-color: #a15c00;
1521
- --bs-btn-border-color: #a15c00;
1557
+ --bs-btn-color: #b45309;
1558
+ --bs-btn-border-color: #b45309;
1522
1559
  --bs-btn-hover-color: #fff;
1523
- --bs-btn-hover-bg: #a15c00;
1524
- --bs-btn-hover-border-color: #a15c00;
1525
- --bs-btn-focus-shadow-rgb: 161, 92, 0;
1560
+ --bs-btn-hover-bg: #b45309;
1561
+ --bs-btn-hover-border-color: #b45309;
1562
+ --bs-btn-focus-shadow-rgb: 180, 83, 9;
1526
1563
  --bs-btn-active-color: #fff;
1527
- --bs-btn-active-bg: #a15c00;
1528
- --bs-btn-active-border-color: #a15c00;
1564
+ --bs-btn-active-bg: #b45309;
1565
+ --bs-btn-active-border-color: #b45309;
1529
1566
  --bs-btn-active-shadow: none;
1530
- --bs-btn-disabled-color: #a15c00;
1567
+ --bs-btn-disabled-color: #b45309;
1531
1568
  --bs-btn-disabled-bg: transparent;
1532
- --bs-btn-disabled-border-color: #a15c00;
1569
+ --bs-btn-disabled-border-color: #b45309;
1533
1570
  --bs-gradient: none;
1534
1571
  }
1535
1572
  .btn-outline-danger {
1536
- --bs-btn-color: #dc2626;
1537
- --bs-btn-border-color: #dc2626;
1573
+ --bs-btn-color: #e7000b;
1574
+ --bs-btn-border-color: #e7000b;
1538
1575
  --bs-btn-hover-color: #fff;
1539
- --bs-btn-hover-bg: #dc2626;
1540
- --bs-btn-hover-border-color: #dc2626;
1541
- --bs-btn-focus-shadow-rgb: 220, 38, 38;
1576
+ --bs-btn-hover-bg: #e7000b;
1577
+ --bs-btn-hover-border-color: #e7000b;
1578
+ --bs-btn-focus-shadow-rgb: 231, 0, 11;
1542
1579
  --bs-btn-active-color: #fff;
1543
- --bs-btn-active-bg: #dc2626;
1544
- --bs-btn-active-border-color: #dc2626;
1580
+ --bs-btn-active-bg: #e7000b;
1581
+ --bs-btn-active-border-color: #e7000b;
1545
1582
  --bs-btn-active-shadow: none;
1546
- --bs-btn-disabled-color: #dc2626;
1583
+ --bs-btn-disabled-color: #e7000b;
1547
1584
  --bs-btn-disabled-bg: transparent;
1548
- --bs-btn-disabled-border-color: #dc2626;
1585
+ --bs-btn-disabled-border-color: #e7000b;
1549
1586
  --bs-gradient: none;
1550
1587
  }
1551
1588
  .btn-outline-light {
@@ -2470,25 +2507,25 @@
2470
2507
  color: var(--bs-breadcrumb-item-active-color);
2471
2508
  }
2472
2509
  .pagination {
2473
- --bs-pagination-padding-x: 0.75rem;
2474
- --bs-pagination-padding-y: 0.375rem;
2510
+ --bs-pagination-padding-x: 0;
2511
+ --bs-pagination-padding-y: 0;
2475
2512
  --bs-pagination-font-size: 0.875rem;
2476
2513
  --bs-pagination-color: var(--moo-muted-foreground);
2477
- --bs-pagination-bg: var(--bs-body-bg);
2514
+ --bs-pagination-bg: transparent;
2478
2515
  --bs-pagination-border-width: var(--bs-border-width);
2479
2516
  --bs-pagination-border-color: transparent;
2480
- --bs-pagination-border-radius: var(--bs-border-radius);
2517
+ --bs-pagination-border-radius: var(--bs-border-radius-lg);
2481
2518
  --bs-pagination-hover-color: var(--bs-body-color);
2482
- --bs-pagination-hover-bg: var(--moo-muted-surface);
2519
+ --bs-pagination-hover-bg: color-mix(in srgb, var(--moo-muted-surface) 50%, transparent);
2483
2520
  --bs-pagination-hover-border-color: transparent;
2484
2521
  --bs-pagination-focus-color: var(--bs-link-hover-color);
2485
- --bs-pagination-focus-bg: var(--moo-muted-surface);
2522
+ --bs-pagination-focus-bg: color-mix(in srgb, var(--moo-muted-surface) 50%, transparent);
2486
2523
  --bs-pagination-focus-box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.25);
2487
2524
  --bs-pagination-active-color: var(--bs-body-color);
2488
- --bs-pagination-active-bg: var(--moo-muted-surface);
2525
+ --bs-pagination-active-bg: color-mix(in srgb, var(--moo-muted-surface) 50%, transparent);
2489
2526
  --bs-pagination-active-border-color: var(--moo-border);
2490
2527
  --bs-pagination-disabled-color: var(--moo-disabled-foreground);
2491
- --bs-pagination-disabled-bg: var(--bs-secondary-bg);
2528
+ --bs-pagination-disabled-bg: transparent;
2492
2529
  --bs-pagination-disabled-border-color: transparent;
2493
2530
  display: flex;
2494
2531
  padding-left: 0;
@@ -2559,12 +2596,12 @@
2559
2596
  }
2560
2597
  }
2561
2598
  .badge {
2562
- --bs-badge-padding-x: 0.65em;
2563
- --bs-badge-padding-y: 0.35em;
2564
- --bs-badge-font-size: 0.75em;
2599
+ --bs-badge-padding-x: 0.5rem;
2600
+ --bs-badge-padding-y: 0.125rem;
2601
+ --bs-badge-font-size: 0.75rem;
2565
2602
  --bs-badge-font-weight: 500;
2566
2603
  --bs-badge-color: #fff;
2567
- --bs-badge-border-radius: var(--bs-border-radius);
2604
+ --bs-badge-border-radius: var(--bs-border-radius-pill);
2568
2605
  display: inline-block;
2569
2606
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
2570
2607
  font-size: var(--bs-badge-font-size);
@@ -2669,18 +2706,18 @@
2669
2706
  .btn-close {
2670
2707
  --bs-btn-close-color: #0a0a0a;
2671
2708
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230a0a0a'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
2672
- --bs-btn-close-opacity: 0.5;
2673
- --bs-btn-close-hover-opacity: 0.75;
2709
+ --bs-btn-close-opacity: 1;
2710
+ --bs-btn-close-hover-opacity: 1;
2674
2711
  --bs-btn-close-focus-shadow: 0 0 0 2px rgba(23, 23, 23, 0.25);
2675
2712
  --bs-btn-close-focus-opacity: 1;
2676
- --bs-btn-close-disabled-opacity: 0.25;
2713
+ --bs-btn-close-disabled-opacity: 0.5;
2677
2714
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
2678
2715
  box-sizing: content-box;
2679
- width: 1em;
2680
- height: 1em;
2681
- padding: 0.25em 0.25em;
2716
+ width: 0.75rem;
2717
+ height: 0.75rem;
2718
+ padding: 0.34375rem 0.34375rem;
2682
2719
  color: var(--bs-btn-close-color);
2683
- background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
2720
+ background: transparent var(--bs-btn-close-bg) center/0.75rem auto no-repeat;
2684
2721
  border: 0;
2685
2722
  border-radius: 0.5rem;
2686
2723
  opacity: var(--bs-btn-close-opacity);
@@ -3821,24 +3858,71 @@
3821
3858
  color: #fff !important;
3822
3859
  background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
3823
3860
  }
3824
- :is(.btn, a, button, summary, [tabindex]):not(input, textarea, select):focus-visible {
3825
- outline: var(--bs-focus-ring-width) solid var(--moo-ring);
3826
- outline-offset: var(--bs-focus-ring-width);
3861
+ :is(.btn, a, button, summary, [tabindex]):not(input, textarea, select):focus-visible,
3862
+ :is(.form-control, .form-select, .form-check-input):focus-visible {
3863
+ border-color: var(--moo-ring);
3864
+ outline: 0;
3865
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
3866
+ }
3867
+ .btn:focus-visible:hover,
3868
+ .btn.show:focus-visible {
3869
+ border-color: var(--bs-btn-hover-border-color);
3870
+ box-shadow: none;
3871
+ }
3872
+ .form-control:focus:not(:focus-visible),
3873
+ .form-select:focus:not(:focus-visible) {
3874
+ border-color: var(--moo-border);
3827
3875
  box-shadow: none;
3828
3876
  }
3877
+ .page-link:focus:not(:focus-visible) {
3878
+ outline: 0;
3879
+ box-shadow: none;
3880
+ }
3881
+ .page-item:not(.active) > .page-link:focus:not(:focus-visible) {
3882
+ color: var(--bs-pagination-color);
3883
+ background-color: var(--bs-pagination-bg);
3884
+ border-color: var(--bs-pagination-border-color);
3885
+ }
3829
3886
  .form-control.is-invalid,
3830
3887
  .form-control.is-invalid:focus,
3888
+ .was-validated .form-control:invalid,
3889
+ .was-validated .form-control:invalid:focus,
3831
3890
  .form-select.is-invalid,
3832
- .form-select.is-invalid:focus {
3833
- box-shadow: 0 0 0 var(--bs-focus-ring-width) color-mix(in srgb, var(--bs-form-invalid-border-color) 20%, transparent);
3891
+ .form-select.is-invalid:focus,
3892
+ .was-validated .form-select:invalid,
3893
+ .was-validated .form-select:invalid:focus {
3894
+ box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
3834
3895
  }
3835
- .btn-check:focus-visible + .btn {
3836
- outline: var(--bs-focus-ring-width) solid var(--moo-ring);
3837
- outline-offset: var(--bs-focus-ring-width);
3896
+ .btn-check:focus:not(:focus-visible) + .btn {
3897
+ outline: 0;
3838
3898
  box-shadow: none;
3839
3899
  }
3900
+ .btn-check:focus-visible + .btn {
3901
+ border-color: var(--moo-ring);
3902
+ outline: 0;
3903
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
3904
+ }
3840
3905
  .input-group > .dropdown-toggle[aria-expanded="true"]:focus-visible {
3906
+ box-shadow: none;
3907
+ }
3908
+ .combobox-chips:focus-within {
3909
+ border-color: var(--moo-ring);
3910
+ outline: 0;
3911
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
3912
+ }
3913
+ .input-group:has(> .form-control:focus):not(:has(> .form-control[type="file"])) {
3914
+ border-color: var(--moo-ring);
3841
3915
  outline: 0;
3916
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
3917
+ }
3918
+ .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select).is-invalid),
3919
+ .was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):has(> :is(.form-control, .form-select):invalid) {
3920
+ border-color: var(--bs-form-invalid-border-color);
3921
+ box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
3922
+ }
3923
+ .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select).is-invalid,
3924
+ .was-validated .input-group.has-validation:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))) > :is(.form-control, .form-select):invalid {
3925
+ box-shadow: none;
3842
3926
  }
3843
3927
  :where( .scroll-fade, .scroll-fade-y, .scroll-fade-x, .scroll-fade-t, .scroll-fade-b, .scroll-fade-l, .scroll-fade-r, .scroll-fade-s, .scroll-fade-e ) {
3844
3928
  --scroll-fade-size: min(12%, 2.5rem);
@@ -4009,14 +4093,21 @@
4009
4093
  }
4010
4094
  }
4011
4095
  kbd {
4096
+ display: inline-flex;
4097
+ height: 1.25rem;
4098
+ min-width: 1.25rem;
4099
+ align-items: center;
4100
+ justify-content: center;
4012
4101
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
4013
4102
  line-height: 1rem;
4014
4103
  font-weight: 500;
4015
- border: var(--bs-border-width) solid var(--bs-border-color);
4016
4104
  }
4017
4105
  .form-control {
4018
4106
  min-height: 2rem;
4019
4107
  }
4108
+ .form-control:not(textarea):not([type="file"]):not(.form-control-sm, .form-control-lg) {
4109
+ min-height: calc(2rem + var(--bs-border-width) * 2);
4110
+ }
4020
4111
  .form-control:disabled,
4021
4112
  .form-select:disabled {
4022
4113
  opacity: var(--moo-disabled-control-opacity);
@@ -4027,17 +4118,26 @@
4027
4118
  textarea.form-control:disabled {
4028
4119
  resize: none;
4029
4120
  }
4121
+ .form-select option,
4122
+ .form-select optgroup {
4123
+ color: var(--bs-body-color);
4124
+ background-color: var(--bs-body-bg);
4125
+ }
4030
4126
  .input-group:not(:has(> .form-control[type="file"])) {
4031
4127
  border: var(--bs-border-width) solid var(--moo-border);
4032
4128
  border-radius: var(--moo-input-group-border-radius);
4129
+ background-color: var(--moo-input-bg, transparent);
4130
+ }
4131
+ .input-group:not(:has(> .form-control[type="file"])):not(:has(> .dropdown-menu)) {
4132
+ overflow: hidden;
4033
4133
  }
4034
4134
  .input-group.rounded-pill:not(:has(> .form-control[type="file"])) {
4035
4135
  --moo-input-group-border-radius: var(--bs-border-radius-pill);
4036
4136
  }
4037
- .input-group:not(:has(textarea)):not(:has(> .form-control[type="file"])) {
4137
+ .input-group:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):not(:has(textarea)):not(:has(> .form-control[type="file"])):not(:has(> [data-align])) {
4038
4138
  height: calc(2rem + var(--bs-border-width) * 2);
4039
4139
  }
4040
- .input-group:not(:has(textarea)):not(:has(> .form-control[type="file"])) > .form-control {
4140
+ .input-group:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):not(:has(textarea)):not(:has(> .form-control[type="file"])):not(:has(> [data-align])) > .form-control {
4041
4141
  min-height: 0;
4042
4142
  }
4043
4143
  .input-group > textarea.form-control {
@@ -4086,10 +4186,10 @@
4086
4186
  color: var(--bs-btn-active-color);
4087
4187
  }
4088
4188
  .input-group > .btn-ghost[aria-pressed="true"] {
4089
- color: var(--bs-primary);
4189
+ color: var(--bs-btn-active-color);
4090
4190
  }
4091
4191
  .input-group > .btn-ghost[aria-pressed="true"]::before {
4092
- opacity: 0;
4192
+ opacity: 1;
4093
4193
  }
4094
4194
  .input-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
4095
4195
  transform: none;
@@ -4101,7 +4201,6 @@
4101
4201
  }
4102
4202
  .input-group > .input-group-text {
4103
4203
  color: var(--bs-secondary-color);
4104
- background-color: transparent;
4105
4204
  }
4106
4205
  .input-group > .input-group-text:first-child {
4107
4206
  padding-inline-end: 0;
@@ -4140,10 +4239,6 @@
4140
4239
  border: 0;
4141
4240
  background-color: transparent;
4142
4241
  }
4143
- .input-group:has(> .form-control:focus):not(:has(> .form-control[type="file"])) {
4144
- border-color: #8b8b8b;
4145
- box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.25);
4146
- }
4147
4242
  .input-group:not(:has(> .form-control[type="file"])) > :is(.form-control, .form-select):focus {
4148
4243
  outline: 0;
4149
4244
  box-shadow: none;
@@ -4203,13 +4298,21 @@ label.btn {
4203
4298
  :is(.btn-xs, .btn-sm, .btn-group-sm > .btn, .btn-group-sm > .btn-group > .btn):not(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg):has(> [data-icon="inline-end"]) {
4204
4299
  padding-inline-end: 0.375rem;
4205
4300
  }
4301
+ .btn-icon {
4302
+ --bs-btn-line-height: 1.25rem;
4303
+ --bs-btn-padding-y: 0.3125rem;
4304
+ }
4206
4305
  .btn-icon,
4207
4306
  .btn-icon-xs,
4208
4307
  .btn-icon-sm,
4209
4308
  .btn-icon-lg {
4210
- padding: 0;
4211
- inline-size: calc( var(--bs-btn-line-height) + var(--bs-btn-padding-y) + var(--bs-btn-padding-y) + var(--bs-btn-border-width) + var(--bs-btn-border-width));
4212
- aspect-ratio: 1;
4309
+ --moo-btn-icon-size: calc(
4310
+ var(--bs-btn-line-height) +
4311
+ var(--bs-btn-padding-y) * 2 +
4312
+ var(--bs-btn-border-width) * 2);
4313
+ padding-inline: 0;
4314
+ inline-size: var(--moo-btn-icon-size);
4315
+ block-size: var(--moo-btn-icon-size);
4213
4316
  }
4214
4317
  :is(.btn-icon, .btn-icon-xs, .btn-icon-sm, .btn-icon-lg)::after {
4215
4318
  display: none;
@@ -4261,19 +4364,19 @@ label.btn {
4261
4364
  --bs-btn-disabled-bg: transparent;
4262
4365
  }
4263
4366
  .btn-primary {
4264
- --bs-btn-color: var(--moo-surface);
4265
- --bs-btn-bg: var(--moo-foreground);
4266
- --bs-btn-hover-bg: color-mix(in srgb, var(--moo-foreground) 88%, var(--moo-surface));
4267
- --bs-btn-active-bg: color-mix(in srgb, var(--moo-foreground) 80%, var(--moo-surface));
4367
+ --bs-btn-color: var(--moo-primary-foreground);
4368
+ --bs-btn-bg: var(--moo-primary);
4369
+ --bs-btn-hover-bg: color-mix(in srgb, var(--moo-primary) 80%, var(--moo-surface));
4370
+ --bs-btn-active-bg: color-mix(in srgb, var(--moo-primary) 72%, var(--moo-surface));
4268
4371
  }
4269
4372
  .btn-secondary {
4270
4373
  --bs-btn-color: var(--moo-foreground);
4271
- --bs-btn-bg: var(--moo-muted-surface);
4374
+ --bs-btn-bg: var(--moo-surface);
4272
4375
  --bs-btn-border-color: var(--moo-border);
4273
- --bs-btn-hover-bg: color-mix(in srgb, var(--moo-muted-surface) 86%, var(--moo-foreground));
4274
- --bs-btn-hover-border-color: color-mix(in srgb, var(--moo-border) 80%, var(--moo-foreground));
4275
- --bs-btn-active-bg: color-mix(in srgb, var(--moo-muted-surface) 78%, var(--moo-foreground));
4276
- --bs-btn-active-border-color: color-mix(in srgb, var(--moo-border) 72%, var(--moo-foreground));
4376
+ --bs-btn-hover-bg: color-mix(in srgb, var(--moo-muted-surface) 95%, var(--moo-foreground));
4377
+ --bs-btn-hover-border-color: color-mix(in srgb, var(--moo-border) 90%, var(--moo-foreground));
4378
+ --bs-btn-active-bg: color-mix(in srgb, var(--moo-muted-surface) 88%, var(--moo-foreground));
4379
+ --bs-btn-active-border-color: color-mix(in srgb, var(--moo-border) 82%, var(--moo-foreground));
4277
4380
  }
4278
4381
  .btn-outline-secondary {
4279
4382
  --bs-btn-color: var(--moo-foreground);
@@ -4300,15 +4403,67 @@ label.btn {
4300
4403
  }
4301
4404
  .btn-danger {
4302
4405
  --bs-btn-color: var(--moo-destructive-foreground);
4303
- --bs-btn-bg: var(--moo-destructive);
4304
- --bs-btn-hover-bg: color-mix(in srgb, var(--moo-destructive) 88%, var(--moo-foreground));
4305
- --bs-btn-active-bg: color-mix(in srgb, var(--moo-destructive) 80%, var(--moo-foreground));
4406
+ --bs-btn-bg: var(--moo-destructive-surface);
4407
+ --bs-btn-border-color: transparent;
4408
+ --bs-btn-hover-color: var(--moo-destructive-foreground);
4409
+ --bs-btn-hover-bg: var(--moo-destructive-surface-hover);
4410
+ --bs-btn-hover-border-color: transparent;
4411
+ --bs-btn-active-color: var(--moo-destructive-foreground);
4412
+ --bs-btn-active-bg: var(--moo-destructive-surface-hover);
4413
+ --bs-btn-active-border-color: transparent;
4306
4414
  }
4307
4415
  .btn-link {
4308
4416
  --bs-btn-color: var(--moo-foreground);
4309
4417
  --bs-btn-hover-color: var(--moo-muted-foreground);
4310
4418
  text-underline-offset: 0.25rem;
4311
4419
  }
4420
+ .btn-close {
4421
+ --bs-btn-close-color: var(--moo-foreground);
4422
+ --bs-btn-hover-color: var(--bs-btn-close-color);
4423
+ --bs-btn-hover-bg: var(--moo-muted-surface);
4424
+ --bs-btn-hover-border-color: transparent;
4425
+ --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6 6 18'/%3e%3cpath d='m6 6 12 12'/%3e%3c/svg%3e");
4426
+ display: inline-flex;
4427
+ flex: 0 0 auto;
4428
+ align-items: center;
4429
+ justify-content: center;
4430
+ border-width: var(--bs-border-width);
4431
+ border-style: var(--bs-border-style);
4432
+ border-color: transparent;
4433
+ border-radius: var(--bs-border-radius-xl);
4434
+ color: var(--bs-btn-close-color);
4435
+ background-image: none;
4436
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
4437
+ }
4438
+ .btn-close::before {
4439
+ width: 0.75rem;
4440
+ height: 0.75rem;
4441
+ content: "";
4442
+ background-color: currentColor;
4443
+ -webkit-mask: var(--bs-btn-close-bg) center/contain no-repeat;
4444
+ mask: var(--bs-btn-close-bg) center/contain no-repeat;
4445
+ }
4446
+ [data-bs-theme="dark"] .btn-close {
4447
+ filter: none;
4448
+ }
4449
+ .btn-close:hover {
4450
+ border-color: var(--bs-btn-hover-border-color);
4451
+ color: var(--bs-btn-hover-color);
4452
+ background-color: var(--bs-btn-hover-bg);
4453
+ }
4454
+ .btn-close:focus-visible {
4455
+ border-color: var(--moo-ring);
4456
+ color: var(--bs-btn-hover-color);
4457
+ background-color: var(--bs-btn-hover-bg);
4458
+ }
4459
+ .btn-close:focus:not(:focus-visible) {
4460
+ box-shadow: none;
4461
+ }
4462
+ .btn-close:disabled,
4463
+ .btn-close.disabled {
4464
+ pointer-events: none;
4465
+ opacity: var(--moo-disabled-control-opacity);
4466
+ }
4312
4467
  [dir="rtl"] .btn-group,
4313
4468
  [dir="rtl"] .btn-toolbar {
4314
4469
  direction: ltr;
@@ -4317,6 +4472,43 @@ label.btn {
4317
4472
  [dir="rtl"] .btn-toolbar > .btn {
4318
4473
  unicode-bidi: plaintext;
4319
4474
  }
4475
+ .btn-group > .btn-icon,
4476
+ .btn-group > .btn-icon-xs,
4477
+ .btn-group > .btn-icon-sm,
4478
+ .btn-group > .btn-icon-lg,
4479
+ .btn-group-vertical > .btn-icon,
4480
+ .btn-group-vertical > .btn-icon-xs,
4481
+ .btn-group-vertical > .btn-icon-sm,
4482
+ .btn-group-vertical > .btn-icon-lg {
4483
+ flex: 0 0 auto;
4484
+ }
4485
+ .btn-group-vertical > .btn-icon,
4486
+ .btn-group-vertical > .btn-icon-xs,
4487
+ .btn-group-vertical > .btn-icon-sm,
4488
+ .btn-group-vertical > .btn-icon-lg {
4489
+ width: var(--moo-btn-icon-size);
4490
+ }
4491
+ .btn-group-select,
4492
+ .input-group > .btn-group-select {
4493
+ flex: 0 0 auto;
4494
+ width: auto;
4495
+ min-width: calc(1.875rem + 1rem);
4496
+ padding-inline-end: 1.875rem;
4497
+ }
4498
+ .toggle-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
4499
+ transform: none;
4500
+ }
4501
+ .toggle-group > .btn-check:checked + .btn {
4502
+ --bs-btn-active-color: var(--moo-primary-foreground);
4503
+ --bs-btn-active-bg: var(--moo-primary);
4504
+ --bs-btn-active-border-color: var(--moo-primary);
4505
+ }
4506
+ .toggle-group > .btn-check:focus-visible + .btn,
4507
+ .toggle-group > .btn-check:checked:focus-visible + .btn {
4508
+ border-color: var(--moo-ring);
4509
+ outline: 0;
4510
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
4511
+ }
4320
4512
  .card {
4321
4513
  --bs-card-bg: var(--moo-surface);
4322
4514
  --bs-card-color: var(--moo-foreground);
@@ -4328,26 +4520,72 @@ label.btn {
4328
4520
  --bs-card-cap-color: var(--moo-foreground);
4329
4521
  --bs-card-title-color: var(--moo-foreground);
4330
4522
  --bs-card-subtitle-color: var(--moo-muted-foreground);
4331
- gap: var(--bs-card-spacer-x);
4332
- padding-block: var(--bs-card-spacer-x);
4523
+ --moo-card-spacing: 1rem;
4524
+ gap: var(--moo-card-spacing);
4525
+ padding-block: var(--moo-card-spacing);
4526
+ border: var(--bs-card-border-width) solid var(--bs-card-border-color);
4333
4527
  box-shadow: var(--bs-card-box-shadow);
4334
4528
  }
4529
+ .card:has(.card-footer) {
4530
+ padding-block-end: 0;
4531
+ }
4532
+ .card:has(> .card-image) {
4533
+ padding-block-start: 0;
4534
+ }
4535
+ .card--sm {
4536
+ --moo-card-spacing: 0.75rem;
4537
+ }
4335
4538
  .card-header {
4539
+ display: grid;
4540
+ grid-template-columns: 1fr auto;
4541
+ column-gap: var(--moo-card-spacing);
4542
+ align-items: flex-start;
4543
+ border-bottom: 0;
4544
+ }
4545
+ .card-header__text {
4336
4546
  display: flex;
4337
4547
  flex-direction: column;
4338
- gap: 0.375rem;
4339
- border-bottom: 0;
4548
+ gap: 0.25rem;
4549
+ min-width: 0;
4550
+ grid-column: 1;
4551
+ }
4552
+ .card-action {
4553
+ grid-column: 2;
4554
+ grid-row: 1;
4340
4555
  }
4341
4556
  .card-header,
4342
4557
  .card-body,
4343
4558
  .card-footer {
4344
4559
  padding-block: 0;
4345
4560
  }
4561
+ .card-header,
4562
+ .card-body {
4563
+ padding-inline: var(--moo-card-spacing);
4564
+ }
4346
4565
  .card-footer {
4347
4566
  display: flex;
4348
4567
  align-items: center;
4349
4568
  gap: 0.5rem;
4350
- border-top: 0;
4569
+ padding: var(--moo-card-spacing);
4570
+ border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
4571
+ background-color: var(--moo-muted-surface);
4572
+ }
4573
+ .card-img-top {
4574
+ border-top-left-radius: var(--bs-card-border-radius);
4575
+ border-top-right-radius: var(--bs-card-border-radius);
4576
+ }
4577
+ .card-image {
4578
+ aspect-ratio: 16 / 9;
4579
+ overflow: hidden;
4580
+ border-top-left-radius: var(--bs-card-border-radius);
4581
+ border-top-right-radius: var(--bs-card-border-radius);
4582
+ background-color: var(--moo-muted-surface);
4583
+ }
4584
+ .card-image .card-img-top {
4585
+ width: 100%;
4586
+ height: 100%;
4587
+ object-fit: cover;
4588
+ border-radius: 0;
4351
4589
  }
4352
4590
  .card-title {
4353
4591
  margin-bottom: 0;
@@ -4359,6 +4597,13 @@ label.btn {
4359
4597
  .card-subtitle {
4360
4598
  margin-top: 0;
4361
4599
  font-size: 0.875rem;
4600
+ color: var(--moo-muted-foreground);
4601
+ }
4602
+ .table-responsive:not(.scroll-fade-x):has(.table-row-actions > [aria-expanded="true"]) {
4603
+ overflow: visible;
4604
+ }
4605
+ .table-row-actions:has(> [aria-expanded="true"]) {
4606
+ z-index: 1000;
4362
4607
  }
4363
4608
  .dropdown-menu {
4364
4609
  --bs-dropdown-bg: var(--moo-surface);
@@ -4389,6 +4634,17 @@ label.btn {
4389
4634
  height: 1rem;
4390
4635
  flex: 0 0 auto;
4391
4636
  }
4637
+ .dropdown-item[data-variant="destructive"] {
4638
+ color: var(--moo-destructive) !important;
4639
+ }
4640
+ .dropdown-item[data-variant="destructive"]:hover,
4641
+ .dropdown-item[data-variant="destructive"]:focus {
4642
+ color: var(--moo-destructive) !important;
4643
+ background-color: var(--moo-destructive-surface) !important;
4644
+ }
4645
+ .dropdown-item[data-variant="destructive"] > [data-icon] {
4646
+ color: var(--moo-destructive) !important;
4647
+ }
4392
4648
  .dropdown-menu .dropdown-divider {
4393
4649
  margin-inline: calc(-1 * var(--bs-dropdown-padding-x));
4394
4650
  border-block-start: var(--bs-border-width) solid var(--bs-dropdown-divider-bg);
@@ -4408,8 +4664,8 @@ label.btn {
4408
4664
  flex: 0 0 auto;
4409
4665
  align-items: center;
4410
4666
  justify-content: center;
4411
- width: 1em;
4412
- height: 1em;
4667
+ width: 1rem;
4668
+ height: 1rem;
4413
4669
  border: var(--bs-border-width) solid var(--bs-border-color);
4414
4670
  border-radius: var(--moo-dropdown-item-check-border-radius);
4415
4671
  color: transparent;
@@ -4452,8 +4708,26 @@ label.btn {
4452
4708
  --moo-dropdown-sidebar-min-width: 14rem;
4453
4709
  min-width: max(100%, var(--moo-dropdown-sidebar-min-width));
4454
4710
  }
4711
+ @media (max-width: 575.98px) {
4712
+ [data-slot="sidebar-header"] .dropend > .dropdown-menu,
4713
+ [data-slot="sidebar-footer"] .dropend > .dropdown-menu {
4714
+ left: 0 !important;
4715
+ right: 0 !important;
4716
+ min-width: 100%;
4717
+ margin: 0;
4718
+ transform: none !important;
4719
+ }
4720
+ [data-slot="sidebar-header"] .dropend > .dropdown-menu {
4721
+ top: calc(100% + 0.25rem) !important;
4722
+ bottom: auto !important;
4723
+ }
4724
+ [data-slot="sidebar-footer"] .dropend > .dropdown-menu {
4725
+ top: auto !important;
4726
+ bottom: calc(100% + 0.25rem) !important;
4727
+ }
4728
+ }
4455
4729
  @media (min-width: 992px) {
4456
- [data-slot="sidebar-header"] [data-moo-sidebar-dropdown-positioned] > .dropdown-menu {
4730
+ [data-slot="sidebar-header"] [data-sidebar-dropdown-positioned] > .dropdown-menu {
4457
4731
  position: fixed !important;
4458
4732
  z-index: 1000;
4459
4733
  inset-block-start: var(--moo-sidebar-dropdown-block-start) !important;
@@ -4533,8 +4807,9 @@ label.btn {
4533
4807
  height: 0.9375rem;
4534
4808
  min-width: 0.9375rem;
4535
4809
  padding-inline: 0.2rem;
4810
+ border: 0;
4536
4811
  border-radius: var(--bs-border-radius-pill);
4537
- border: 2px solid var(--bs-body-bg);
4812
+ box-shadow: 0 0 0 2px var(--bs-body-bg);
4538
4813
  background-color: var(--moo-muted-surface);
4539
4814
  color: var(--moo-foreground);
4540
4815
  font-size: 0.625rem;
@@ -4551,14 +4826,14 @@ label.btn {
4551
4826
  padding-inline: 0;
4552
4827
  }
4553
4828
  .avatar-badge--icon {
4554
- width: 0.75rem;
4555
- height: 0.75rem;
4556
- min-width: 0.75rem;
4829
+ width: 0.625rem;
4830
+ height: 0.625rem;
4831
+ min-width: 0.625rem;
4557
4832
  padding-inline: 0;
4558
4833
  }
4559
4834
  .avatar-badge--icon [data-icon] {
4560
- width: 0.375rem;
4561
- height: 0.375rem;
4835
+ width: 0.5rem;
4836
+ height: 0.5rem;
4562
4837
  }
4563
4838
  .avatar-sm {
4564
4839
  width: 1.5rem;
@@ -4575,6 +4850,7 @@ label.btn {
4575
4850
  align-items: center;
4576
4851
  }
4577
4852
  .avatar-group > .avatar {
4853
+ box-shadow: 0 0 0 2px var(--bs-body-bg);
4578
4854
  z-index: 0;
4579
4855
  }
4580
4856
  .avatar-group .avatar + .avatar,
@@ -4680,11 +4956,11 @@ label.btn {
4680
4956
  height: calc(100% - 1rem);
4681
4957
  max-height: calc(100% - 1rem);
4682
4958
  }
4683
- .sidebar-wrapper[data-moo-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] {
4959
+ .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] {
4684
4960
  flex-basis: calc(var(--moo-sidebar-width-icon) + 1rem);
4685
4961
  width: calc(var(--moo-sidebar-width-icon) + 1rem);
4686
4962
  }
4687
- .sidebar-wrapper[data-moo-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
4963
+ .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-variant="floating"][data-collapsible="icon"] .sidebar-inner {
4688
4964
  box-shadow: var(--bs-box-shadow);
4689
4965
  }
4690
4966
  }
@@ -4829,6 +5105,10 @@ label.btn {
4829
5105
  font-weight: 500;
4830
5106
  background: var(--moo-sidebar-accent);
4831
5107
  }
5108
+ .sidebar-content:has(.sidebar-menu:is(:hover, :focus-within)) .sidebar-menu-button[aria-current="page"]:not(:hover):not(:focus-visible),
5109
+ .sidebar-content:has(.sidebar-menu-button:not([aria-current="page"]):is(:hover, :focus-visible)) .sidebar-menu-button[aria-current="page"]:not(:hover):not(:focus-visible) {
5110
+ background: transparent;
5111
+ }
4832
5112
  .sidebar-menu-button--lg {
4833
5113
  height: 3rem;
4834
5114
  padding: 0.5rem;
@@ -4965,9 +5245,6 @@ label.btn {
4965
5245
  border: var(--bs-border-width) solid var(--moo-sidebar-border);
4966
5246
  background: var(--moo-sidebar-accent);
4967
5247
  }
4968
- .sidebar-avatar {
4969
- border-radius: var(--bs-border-radius);
4970
- }
4971
5248
  .sidebar-footer .sidebar-account-menu {
4972
5249
  width: auto;
4973
5250
  min-width: var(--moo-dropdown-sidebar-min-width);
@@ -5041,14 +5318,14 @@ label.btn {
5041
5318
  border-radius: var(--bs-border-radius-xl);
5042
5319
  box-shadow: var(--bs-box-shadow-sm);
5043
5320
  }
5044
- .sidebar-wrapper[data-moo-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"]) .sidebar-inset {
5321
+ .sidebar-wrapper[data-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"]) .sidebar-inset {
5045
5322
  margin-inline-start: 0.5rem;
5046
5323
  }
5047
5324
  .sidebar-wrapper:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
5048
5325
  margin-inline-start: 0.5rem;
5049
5326
  margin-inline-end: 0;
5050
5327
  }
5051
- .sidebar-wrapper[data-moo-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
5328
+ .sidebar-wrapper[data-sidebar-state="collapsed"]:has(.sidebar[data-variant="inset"][data-side="right"]) .sidebar-inset {
5052
5329
  margin-inline-end: 0.5rem;
5053
5330
  }
5054
5331
  }
@@ -5083,27 +5360,27 @@ label.btn {
5083
5360
  .sidebar {
5084
5361
  position: relative;
5085
5362
  }
5086
- .sidebar-wrapper[data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
5363
+ .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] {
5087
5364
  flex-basis: var(--moo-sidebar-width-icon);
5088
5365
  width: var(--moo-sidebar-width-icon);
5089
5366
  }
5090
- .sidebar-wrapper[data-moo-sidebar-state="collapsed"] .sidebar-inset {
5367
+ .sidebar-wrapper[data-sidebar-state="collapsed"] .sidebar-inset {
5091
5368
  position: relative;
5092
5369
  z-index: 0;
5093
5370
  }
5094
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-label,
5095
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__text,
5096
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__subtitle,
5097
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__end {
5371
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-label,
5372
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__text,
5373
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__subtitle,
5374
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button__end {
5098
5375
  display: none;
5099
5376
  }
5100
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-sub,
5101
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-action,
5102
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-action,
5103
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-badge {
5377
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-sub,
5378
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-action,
5379
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-group-action,
5380
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-badge {
5104
5381
  display: none !important;
5105
5382
  }
5106
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"]:has(.sidebar-menu-button[data-bs-toggle="dropdown"][aria-expanded="true"]) {
5383
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"]:has(.sidebar-menu-button[data-bs-toggle="dropdown"][aria-expanded="true"]) {
5107
5384
  z-index: 1000;
5108
5385
  }
5109
5386
  .sidebar-menu-flyout {
@@ -5137,48 +5414,48 @@ label.btn {
5137
5414
  .sidebar-menu-flyout .sidebar-menu-badge {
5138
5415
  display: flex !important;
5139
5416
  }
5140
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button {
5417
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button {
5141
5418
  justify-content: center;
5142
5419
  padding-inline: 0;
5143
5420
  }
5144
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:hover {
5421
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:hover {
5145
5422
  background: transparent;
5146
5423
  }
5147
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace[aria-expanded="true"] {
5424
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace[aria-expanded="true"] {
5148
5425
  background: transparent;
5149
5426
  outline: 0;
5150
5427
  box-shadow: none;
5151
5428
  }
5152
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:focus-visible {
5429
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--workspace:focus-visible {
5153
5430
  background: transparent;
5154
5431
  outline: 0;
5155
5432
  box-shadow: none;
5156
5433
  }
5157
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account {
5434
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account {
5158
5435
  padding: 0;
5159
5436
  overflow: visible;
5160
5437
  }
5161
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:hover {
5438
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:hover {
5162
5439
  background: transparent;
5163
5440
  }
5164
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account[aria-expanded="true"] {
5441
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account[aria-expanded="true"] {
5165
5442
  background: transparent;
5166
5443
  outline: 0;
5167
5444
  box-shadow: none;
5168
5445
  }
5169
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:focus-visible {
5446
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-item--account > .sidebar-menu-button--account:focus-visible {
5170
5447
  background: transparent;
5171
5448
  outline: 0;
5172
5449
  box-shadow: none;
5173
5450
  }
5174
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--lg {
5451
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-button--lg {
5175
5452
  height: 2rem;
5176
5453
  padding: 0;
5177
5454
  }
5178
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-skeleton {
5455
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-skeleton {
5179
5456
  justify-content: center;
5180
5457
  }
5181
- [data-moo-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-skeleton__line {
5458
+ [data-sidebar-state="collapsed"] .sidebar[data-collapsible="icon"] .sidebar-menu-skeleton__line {
5182
5459
  display: none;
5183
5460
  }
5184
5461
  }
@@ -5209,15 +5486,46 @@ label.btn {
5209
5486
  .alert {
5210
5487
  --bs-alert-border-color: var(--moo-border);
5211
5488
  --bs-alert-color: var(--moo-foreground);
5489
+ --bs-alert-padding-x: 0.625rem;
5490
+ --bs-alert-padding-y: 0.5rem;
5212
5491
  display: flex;
5213
5492
  align-items: flex-start;
5214
- gap: 0.75rem;
5493
+ gap: 0.375rem;
5494
+ }
5495
+ .alert-dismissible {
5496
+ padding-right: 0;
5497
+ padding-left: 0;
5498
+ padding-inline-start: var(--bs-alert-padding-x);
5499
+ padding-inline-end: calc(var(--bs-alert-padding-x) + 1.9375rem);
5500
+ }
5501
+ .alert-dismissible .btn-close {
5502
+ top: auto;
5503
+ right: auto;
5504
+ inset-block-start: 50%;
5505
+ inset-inline-end: var(--bs-alert-padding-x);
5506
+ padding: 0.34375rem 0.34375rem;
5507
+ transform: translateY(-50%);
5215
5508
  }
5216
5509
  .alert-danger {
5217
5510
  --bs-alert-bg: transparent;
5218
5511
  --bs-alert-border-color: var(--moo-border);
5219
5512
  --bs-alert-color: var(--moo-destructive);
5220
5513
  }
5514
+ .alert-warning {
5515
+ --bs-alert-bg: var(--moo-warning-surface);
5516
+ --bs-alert-border-color: var(--moo-border);
5517
+ --bs-alert-color: var(--moo-warning);
5518
+ }
5519
+ .alert-success {
5520
+ --bs-alert-bg: var(--moo-success-surface);
5521
+ --bs-alert-border-color: var(--moo-border);
5522
+ --bs-alert-color: var(--moo-success);
5523
+ }
5524
+ .alert-info {
5525
+ --bs-alert-bg: var(--moo-info-surface);
5526
+ --bs-alert-border-color: var(--moo-border);
5527
+ --bs-alert-color: var(--moo-info);
5528
+ }
5221
5529
  .alert-icon {
5222
5530
  display: flex;
5223
5531
  flex: 0 0 auto;
@@ -5231,6 +5539,9 @@ label.btn {
5231
5539
  flex: 1 1 auto;
5232
5540
  min-width: 0;
5233
5541
  }
5542
+ .alert-body p {
5543
+ color: color-mix(in srgb, var(--bs-alert-color) 60%, var(--bs-secondary-color));
5544
+ }
5234
5545
  .alert-heading {
5235
5546
  margin-bottom: 0.25rem;
5236
5547
  font-size: 0.875rem;
@@ -5241,18 +5552,55 @@ label.btn {
5241
5552
  }
5242
5553
  .breadcrumb {
5243
5554
  --bs-breadcrumb-item-active-color: var(--moo-foreground);
5555
+ --bs-breadcrumb-item-padding-x: 0.375rem;
5556
+ column-gap: var(--bs-breadcrumb-item-padding-x);
5557
+ line-height: 1.25rem;
5558
+ }
5559
+ .breadcrumb-item {
5560
+ display: inline-flex;
5561
+ align-items: center;
5562
+ }
5563
+ .breadcrumb-item + .breadcrumb-item::before {
5564
+ float: none;
5565
+ flex: 0 0 auto;
5566
+ }
5567
+ .breadcrumb-item + .breadcrumb-item {
5568
+ padding-left: 0;
5569
+ }
5570
+ .breadcrumb:not(.breadcrumb--custom-divider) .breadcrumb-item + .breadcrumb-item::before {
5571
+ width: 0.875rem;
5572
+ height: 0.875rem;
5573
+ padding-right: 0;
5574
+ margin-inline-end: var(--bs-breadcrumb-item-padding-x);
5575
+ background-color: var(--moo-muted-foreground);
5576
+ content: "";
5577
+ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/100% 100% no-repeat;
5578
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/100% 100% no-repeat;
5579
+ }
5580
+ .breadcrumb--custom-divider .breadcrumb-item + .breadcrumb-item::before {
5581
+ display: inline-flex;
5582
+ align-items: center;
5583
+ justify-content: center;
5584
+ width: 0.875rem;
5585
+ height: 0.875rem;
5586
+ padding-right: 0;
5587
+ margin-inline-end: var(--bs-breadcrumb-item-padding-x);
5588
+ line-height: 1;
5244
5589
  }
5245
5590
  :dir(rtl) .breadcrumb {
5246
5591
  --bs-breadcrumb-divider: "<";
5247
5592
  }
5248
5593
  :dir(rtl) .breadcrumb-item + .breadcrumb-item {
5249
- padding-right: var(--bs-breadcrumb-item-padding-x);
5594
+ padding-right: 0;
5250
5595
  padding-left: 0;
5251
5596
  }
5252
5597
  :dir(rtl) .breadcrumb-item + .breadcrumb-item::before {
5253
- float: right;
5254
5598
  padding-right: 0;
5255
- padding-left: var(--bs-breadcrumb-item-padding-x);
5599
+ padding-left: 0;
5600
+ }
5601
+ :dir(rtl) .breadcrumb:not(.breadcrumb--custom-divider) .breadcrumb-item + .breadcrumb-item::before {
5602
+ padding-left: 0;
5603
+ transform: scaleX(-1);
5256
5604
  }
5257
5605
  .breadcrumb-item a {
5258
5606
  color: var(--moo-muted-foreground);
@@ -5272,62 +5620,354 @@ label.btn {
5272
5620
  width: 1rem;
5273
5621
  height: 1rem;
5274
5622
  }
5275
- .breadcrumb-dropdown-item {
5623
+ .breadcrumb-dropdown-item,
5624
+ .breadcrumb-dropdown-item .dropdown {
5276
5625
  display: inline-flex;
5277
5626
  align-items: center;
5278
5627
  }
5279
- .breadcrumb-dropdown-item button {
5628
+ .breadcrumb-dropdown-trigger {
5629
+ display: inline-flex;
5630
+ align-items: center;
5631
+ gap: 0.25rem;
5280
5632
  padding: 0;
5281
5633
  border: 0;
5282
5634
  background-color: transparent;
5283
5635
  color: var(--moo-muted-foreground);
5636
+ font: inherit;
5637
+ line-height: 1.25rem;
5284
5638
  text-decoration: none;
5285
5639
  }
5286
- .breadcrumb-dropdown-item button:hover,
5287
- .breadcrumb-dropdown-item button:focus {
5640
+ .breadcrumb-dropdown-trigger:hover,
5641
+ .breadcrumb-dropdown-trigger:focus {
5288
5642
  color: var(--moo-foreground);
5289
5643
  }
5644
+ .breadcrumb .breadcrumb-dropdown-trigger:focus-visible {
5645
+ outline: 0;
5646
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
5647
+ }
5648
+ .breadcrumb-dropdown-trigger > [data-icon] {
5649
+ width: 0.875rem;
5650
+ height: 0.875rem;
5651
+ }
5290
5652
  .page-link {
5291
5653
  display: inline-flex;
5292
5654
  align-items: center;
5293
5655
  justify-content: center;
5294
- gap: 0.25rem;
5295
- min-width: calc( 1em * var(--bs-body-line-height, 1.5) + var(--bs-pagination-padding-y) * 2 + var(--bs-pagination-border-width) * 2);
5296
- min-height: calc( 1em * var(--bs-body-line-height, 1.5) + var(--bs-pagination-padding-y) * 2 + var(--bs-pagination-border-width) * 2);
5656
+ flex-shrink: 0;
5657
+ gap: 0.375rem;
5658
+ min-width: calc( 1.25rem + 0.625rem + var(--bs-pagination-border-width) * 2);
5659
+ min-height: calc( 1.25rem + 0.625rem + var(--bs-pagination-border-width) * 2);
5660
+ line-height: 1.25rem;
5661
+ font-weight: 500;
5662
+ white-space: nowrap;
5663
+ user-select: none;
5664
+ }
5665
+ .page-link[aria-label]:has(> span:not(.visually-hidden):not(.d-none)):has([data-icon="inline-start"]) {
5666
+ padding-inline-start: 0.375rem;
5667
+ padding-inline-end: 0.625rem;
5668
+ }
5669
+ .page-link[aria-label]:has(> span:not(.visually-hidden):not(.d-none)):has([data-icon="inline-end"]) {
5670
+ padding-inline-start: 0.625rem;
5671
+ padding-inline-end: 0.375rem;
5672
+ }
5673
+ @media (min-width: 576px) {
5674
+ .page-link[aria-label]:has(> .d-sm-inline):has([data-icon="inline-start"]) {
5675
+ padding-inline-start: 0.375rem;
5676
+ padding-inline-end: 0.625rem;
5677
+ }
5678
+ .page-link[aria-label]:has(> .d-sm-inline):has([data-icon="inline-end"]) {
5679
+ padding-inline-start: 0.625rem;
5680
+ padding-inline-end: 0.375rem;
5681
+ }
5682
+ }
5683
+ .page-link:has([data-icon]):not(:has(> span:not(.visually-hidden))) {
5684
+ padding-inline: 0;
5297
5685
  }
5298
5686
  .page-link [data-icon] {
5299
5687
  width: 1rem;
5300
5688
  height: 1rem;
5689
+ flex: 0 0 auto;
5690
+ }
5691
+ .page-item:not(.disabled) .page-link:active {
5692
+ transform: translateY(0.5px);
5301
5693
  }
5302
5694
  .page-item.disabled {
5303
5695
  opacity: var(--moo-disabled-control-opacity);
5304
5696
  }
5305
- .progress {
5306
- --bs-progress-bar-bg: var(--moo-foreground);
5307
- }
5308
- hr {
5309
- opacity: 1;
5697
+ .badge {
5698
+ display: inline-flex;
5699
+ height: 1.25rem;
5700
+ align-items: center;
5701
+ justify-content: center;
5702
+ border: var(--bs-border-width) solid var(--bs-border-color);
5703
+ border-color: transparent;
5704
+ gap: 0.25rem;
5705
+ line-height: 1rem;
5706
+ }
5707
+ .badge[class~="border"] {
5708
+ border-color: var(--moo-border) !important;
5709
+ }
5710
+ .badge[class~="text-bg-primary"] {
5711
+ color: var(--moo-primary-foreground) !important;
5712
+ background-color: var(--moo-primary) !important;
5713
+ }
5714
+ .badge[class~="text-bg-secondary"] {
5715
+ color: var(--moo-foreground) !important;
5716
+ background-color: var(--moo-muted-surface) !important;
5717
+ }
5718
+ .badge[class~="text-bg-danger"] {
5719
+ color: var(--moo-destructive) !important;
5720
+ background-color: var(--moo-destructive-surface) !important;
5721
+ }
5722
+ .badge[class~="text-body-secondary"] {
5723
+ color: var(--moo-foreground) !important;
5724
+ }
5725
+ .progress {
5726
+ --bs-progress-bar-color: var(--moo-primary-foreground);
5727
+ --bs-progress-bar-bg: var(--moo-primary);
5728
+ }
5729
+ .slider {
5730
+ display: grid;
5731
+ gap: 0.5rem;
5732
+ width: 100%;
5733
+ }
5734
+ .slider-track {
5735
+ position: relative;
5736
+ display: flex;
5737
+ align-items: center;
5738
+ width: 100%;
5739
+ height: 0.75rem;
5740
+ cursor: pointer;
5741
+ touch-action: none;
5742
+ }
5743
+ .slider-track::before,
5744
+ .slider-range {
5745
+ position: absolute;
5746
+ inset-block-start: 50%;
5747
+ height: 0.25rem;
5748
+ border-radius: var(--bs-border-radius-pill);
5749
+ transform: translateY(-50%);
5750
+ pointer-events: none;
5751
+ }
5752
+ .slider-track::before {
5753
+ content: "";
5754
+ inset-inline: 0;
5755
+ background-color: var(--bs-secondary-bg);
5756
+ box-shadow: var(--bs-box-shadow-inset);
5757
+ }
5758
+ .slider-range {
5759
+ inset-inline-start: var(--moo-slider-start, 0%);
5760
+ inset-inline-end: calc(100% - var(--moo-slider-end, 0%));
5761
+ background-color: var(--moo-primary);
5762
+ }
5763
+ .slider-input {
5764
+ position: absolute;
5765
+ inset: 0;
5766
+ margin: 0;
5767
+ width: 100%;
5768
+ height: 100%;
5769
+ pointer-events: none;
5770
+ }
5771
+ .slider-input::-webkit-slider-runnable-track {
5772
+ height: 0.25rem;
5773
+ background-color: transparent;
5774
+ box-shadow: none;
5775
+ }
5776
+ .slider-input::-moz-range-track {
5777
+ height: 0.25rem;
5778
+ background-color: transparent;
5779
+ box-shadow: none;
5780
+ }
5781
+ .slider-input::-webkit-slider-thumb {
5782
+ position: relative;
5783
+ z-index: 1;
5784
+ width: 0.75rem;
5785
+ height: 0.75rem;
5786
+ margin-top: -0.25rem;
5787
+ background-color: var(--bs-body-bg);
5788
+ border-width: var(--bs-border-width);
5789
+ border-style: solid;
5790
+ border-color: var(--moo-primary);
5791
+ box-shadow: var(--bs-box-shadow-sm);
5792
+ pointer-events: auto;
5793
+ }
5794
+ .slider-input::-moz-range-thumb {
5795
+ position: relative;
5796
+ z-index: 1;
5797
+ width: 0.75rem;
5798
+ height: 0.75rem;
5799
+ background-color: var(--bs-body-bg);
5800
+ border-width: var(--bs-border-width);
5801
+ border-style: solid;
5802
+ border-color: var(--moo-primary);
5803
+ box-shadow: var(--bs-box-shadow-sm);
5804
+ pointer-events: auto;
5805
+ }
5806
+ .slider-input::-webkit-slider-thumb:active {
5807
+ background-color: var(--bs-body-bg);
5808
+ border-color: var(--moo-primary);
5809
+ }
5810
+ .slider-input::-moz-range-thumb:active {
5811
+ background-color: var(--bs-body-bg);
5812
+ border-color: var(--moo-primary);
5813
+ }
5814
+ .slider-input:focus-visible::-webkit-slider-thumb {
5815
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
5816
+ }
5817
+ .slider-input:focus-visible::-moz-range-thumb {
5818
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
5819
+ }
5820
+ .slider[data-slider-dragging] .slider-input::-webkit-slider-thumb {
5821
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
5822
+ }
5823
+ .slider[data-slider-dragging] .slider-input::-moz-range-thumb {
5824
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
5825
+ }
5826
+ .slider[data-slider-pointer-focus]:not([data-slider-dragging]) .slider-input:focus::-webkit-slider-thumb {
5827
+ box-shadow: var(--bs-box-shadow-sm);
5828
+ }
5829
+ .slider[data-slider-pointer-focus]:not([data-slider-dragging]) .slider-input:focus::-moz-range-thumb {
5830
+ box-shadow: var(--bs-box-shadow-sm);
5831
+ }
5832
+ .slider-input:disabled {
5833
+ opacity: 1;
5834
+ }
5835
+ .slider-input:disabled::-webkit-slider-thumb {
5836
+ background-color: var(--moo-muted-surface);
5837
+ border-color: var(--moo-disabled-foreground);
5838
+ box-shadow: none;
5839
+ cursor: default;
5840
+ }
5841
+ .slider-input:disabled::-moz-range-thumb {
5842
+ background-color: var(--moo-muted-surface);
5843
+ border-color: var(--moo-disabled-foreground);
5844
+ box-shadow: none;
5845
+ cursor: default;
5846
+ }
5847
+ .slider-input:disabled:focus-visible::-webkit-slider-thumb,
5848
+ .slider[data-slider-dragging] .slider-input:disabled::-webkit-slider-thumb,
5849
+ .slider[data-slider-pointer-focus] .slider-input:disabled:focus-visible::-webkit-slider-thumb {
5850
+ background-color: var(--moo-muted-surface);
5851
+ border-color: var(--moo-disabled-foreground);
5852
+ box-shadow: none;
5853
+ }
5854
+ .slider-input:disabled:focus-visible::-moz-range-thumb,
5855
+ .slider[data-slider-dragging] .slider-input:disabled::-moz-range-thumb,
5856
+ .slider[data-slider-pointer-focus] .slider-input:disabled:focus-visible::-moz-range-thumb {
5857
+ background-color: var(--moo-muted-surface);
5858
+ border-color: var(--moo-disabled-foreground);
5859
+ box-shadow: none;
5860
+ }
5861
+ .slider:has(.slider-input:disabled) .slider-track {
5862
+ cursor: default;
5863
+ }
5864
+ .slider:has(.slider-input:disabled) .slider-range {
5865
+ background-color: var(--moo-disabled-foreground);
5866
+ }
5867
+ .slider--range .slider-input--upper {
5868
+ z-index: 2;
5869
+ }
5870
+ .slider--vertical {
5871
+ width: max-content;
5872
+ }
5873
+ .slider--vertical .slider-track {
5874
+ justify-content: center;
5875
+ justify-self: center;
5876
+ width: 0.75rem;
5877
+ height: 8rem;
5878
+ }
5879
+ .slider--vertical .slider-track::before {
5880
+ inset-block: 0;
5881
+ inset-inline: auto;
5882
+ width: 0.25rem;
5883
+ height: auto;
5884
+ transform: none;
5885
+ }
5886
+ .slider--vertical .slider-range {
5887
+ inset-block-start: calc(100% - var(--moo-slider-end, 0%));
5888
+ inset-block-end: var(--moo-slider-start, 0%);
5889
+ inset-inline-start: 50%;
5890
+ inset-inline-end: auto;
5891
+ width: 0.25rem;
5892
+ height: auto;
5893
+ transform: translateX(-50%);
5894
+ }
5895
+ .slider--vertical .slider-input {
5896
+ width: 100%;
5897
+ height: 100%;
5898
+ writing-mode: vertical-lr;
5899
+ direction: rtl;
5900
+ }
5901
+ hr {
5902
+ opacity: 1;
5310
5903
  border-top: var(--bs-border-width) solid var(--moo-border);
5311
5904
  }
5312
5905
  .vr {
5313
5906
  opacity: 1;
5314
5907
  background-color: var(--moo-border);
5315
5908
  }
5316
- [data-bs-theme="dark"] .form-check-input:checked {
5317
- filter: invert(1);
5909
+ .form-check-input {
5910
+ margin-top: 0.125rem;
5911
+ }
5912
+ .form-check-input[type="checkbox"]:checked:not([role="switch"]) {
5913
+ --bs-form-check-bg-image: none;
5914
+ position: relative;
5915
+ overflow: hidden;
5318
5916
  }
5319
- .form-check-input[type="checkbox"]:focus:active,
5320
- .form-check-input[type="checkbox"]:focus:not(:focus-visible) {
5917
+ .form-check-input[type="checkbox"]:checked:not([role="switch"])::after {
5918
+ position: absolute;
5919
+ top: 45%;
5920
+ left: 50%;
5921
+ width: 0.32em;
5922
+ height: 0.58em;
5923
+ border-color: var(--moo-primary-foreground);
5924
+ border-style: solid;
5925
+ border-width: 0 0.14em 0.14em 0;
5926
+ content: "";
5927
+ transform: translate(-50%, -55%) rotate(45deg);
5928
+ transform-origin: center;
5929
+ }
5930
+ .form-check-input[type="checkbox"]:indeterminate:not([role="switch"]) {
5931
+ --bs-form-check-bg-image: linear-gradient(var(--moo-primary-foreground), var(--moo-primary-foreground));
5932
+ background-size: 62% 14%;
5933
+ background-position: center;
5934
+ }
5935
+ .form-check-input[type="radio"]:checked {
5936
+ --bs-form-check-bg-image: radial-gradient(circle at center, var(--moo-primary-foreground) 0 34%, transparent 36%);
5937
+ }
5938
+ .form-check-input:is([type="checkbox"], [type="radio"]):not(.is-invalid):focus:active,
5939
+ .form-check-input:is([type="checkbox"], [type="radio"]):not(.is-invalid):focus:not(:focus-visible) {
5321
5940
  border-color: var(--bs-border-color);
5322
5941
  box-shadow: none;
5323
5942
  }
5324
- .form-check-input[type="checkbox"]:checked:focus:active,
5325
- .form-check-input[type="checkbox"]:checked:focus:not(:focus-visible) {
5326
- border-color: #171717;
5943
+ .form-check-input:is([type="checkbox"], [type="radio"]):checked:not(.is-invalid):focus:active,
5944
+ .form-check-input:is([type="checkbox"], [type="radio"]):checked:not(.is-invalid):focus:not(:focus-visible) {
5945
+ border-color: var(--moo-primary);
5946
+ }
5947
+ .form-check-input[type="checkbox"]:not(.is-invalid):indeterminate:focus:active,
5948
+ .form-check-input[type="checkbox"]:not(.is-invalid):indeterminate:focus:not(:focus-visible) {
5949
+ border-color: var(--moo-primary);
5950
+ }
5951
+ .form-check-input.is-invalid {
5952
+ box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
5953
+ }
5954
+ .form-check-input.is-invalid:focus:active,
5955
+ .form-check-input.is-invalid:focus:not(:focus-visible) {
5956
+ box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
5957
+ }
5958
+ .form-check-input:is([type="checkbox"], [type="radio"]).is-invalid:checked:focus:active,
5959
+ .form-check-input:is([type="checkbox"], [type="radio"]).is-invalid:checked:focus:not(:focus-visible) {
5960
+ box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
5327
5961
  }
5328
- .form-check-input[type="checkbox"]:indeterminate:focus:active,
5329
- .form-check-input[type="checkbox"]:indeterminate:focus:not(:focus-visible) {
5330
- border-color: #171717;
5962
+ .form-check-input[type="checkbox"].is-invalid:indeterminate:focus:active,
5963
+ .form-check-input[type="checkbox"].is-invalid:indeterminate:focus:not(:focus-visible) {
5964
+ box-shadow: 0 0 0 3px var(--moo-form-invalid-ring-color);
5965
+ }
5966
+ .form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked,
5967
+ .form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked:focus:active,
5968
+ .form-check-input:is([type="checkbox"], [type="radio"]):not([role="switch"]).is-invalid:checked:focus:not(:focus-visible) {
5969
+ border-color: var(--moo-primary);
5970
+ background-color: var(--moo-primary);
5331
5971
  }
5332
5972
  .radio-group legend.form-label {
5333
5973
  font-size: inherit;
@@ -5335,10 +5975,20 @@ label.btn {
5335
5975
  .form-switch .form-check-input {
5336
5976
  height: 1.15rem;
5337
5977
  }
5978
+ :where([data-bs-theme="dark"]) .form-switch .form-check-input:checked {
5979
+ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2318181b'/%3e%3c/svg%3e");
5980
+ background-color: var(--moo-primary);
5981
+ border-color: var(--moo-primary);
5982
+ filter: none;
5983
+ }
5338
5984
  .form-switch .form-check-input:focus:active:not(:checked),
5339
5985
  .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
5340
5986
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2810, 10, 10, 0.25%29'/%3e%3c/svg%3e");
5341
5987
  }
5988
+ :where([data-bs-theme="dark"]) .form-switch .form-check-input:focus:active:not(:checked),
5989
+ :where([data-bs-theme="dark"]) .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
5990
+ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
5991
+ }
5342
5992
  .spinner [data-icon] {
5343
5993
  width: 1rem;
5344
5994
  height: 1rem;
@@ -5402,6 +6052,7 @@ label.btn {
5402
6052
  font-weight: 500;
5403
6053
  color: var(--bs-secondary-text-emphasis);
5404
6054
  border-radius: var(--bs-border-radius);
6055
+ cursor: default;
5405
6056
  transition: all 0.2s ease-in-out;
5406
6057
  }
5407
6058
  @media (prefers-reduced-motion: reduce) {
@@ -5412,11 +6063,55 @@ label.btn {
5412
6063
  .tabs-list .nav-link:hover {
5413
6064
  color: var(--moo-foreground);
5414
6065
  }
6066
+ .tabs-list .nav-link:not(.active, .disabled):hover {
6067
+ background-color: transparent;
6068
+ box-shadow: none;
6069
+ }
6070
+ .tabs-list .nav-link:focus:not(:focus-visible) {
6071
+ outline: 0;
6072
+ box-shadow: none;
6073
+ }
5415
6074
  .tabs-list .nav-link.active {
5416
6075
  color: var(--moo-foreground);
5417
6076
  background-color: var(--moo-surface);
5418
6077
  box-shadow: var(--bs-box-shadow-sm);
5419
6078
  }
6079
+ .tabs-list .nav-link.active:focus-visible {
6080
+ border-color: var(--moo-ring);
6081
+ outline: 0;
6082
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
6083
+ }
6084
+ .tabs-list:has(.nav-link:hover) .nav-link.active:not(:hover) {
6085
+ background-color: var(--moo-surface);
6086
+ box-shadow: var(--bs-box-shadow-sm);
6087
+ }
6088
+ .tabs--vertical {
6089
+ display: flex;
6090
+ align-items: flex-start;
6091
+ gap: 1rem;
6092
+ width: 100%;
6093
+ max-width: 100%;
6094
+ }
6095
+ .tabs--vertical .tabs-list {
6096
+ flex: 0 0 auto;
6097
+ }
6098
+ .tabs--vertical .nav-link {
6099
+ justify-content: flex-start;
6100
+ text-align: start;
6101
+ }
6102
+ .tabs--vertical .tab-content {
6103
+ flex: 1 1 auto;
6104
+ min-width: 0;
6105
+ margin-top: 0;
6106
+ }
6107
+ @media (max-width: 575.98px) {
6108
+ .tabs--vertical {
6109
+ flex-direction: column;
6110
+ }
6111
+ .tabs--vertical .tabs-list {
6112
+ flex-direction: row !important;
6113
+ }
6114
+ }
5420
6115
  .tabs-list .nav-link:disabled,
5421
6116
  .tabs-list .nav-link.disabled {
5422
6117
  color: var(--moo-disabled-foreground);
@@ -5437,14 +6132,12 @@ label.btn {
5437
6132
  max-width: 100%;
5438
6133
  min-width: 0;
5439
6134
  opacity: 0;
5440
- transform: translateY(0.25rem);
5441
6135
  visibility: hidden;
5442
6136
  pointer-events: none;
5443
- transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
6137
+ transition: opacity 0.16s ease, visibility 0s linear 0.16s;
5444
6138
  }
5445
6139
  .tab-content > .active {
5446
6140
  opacity: 1;
5447
- transform: none;
5448
6141
  visibility: visible;
5449
6142
  pointer-events: auto;
5450
6143
  transition-delay: 0s;
@@ -5492,8 +6185,44 @@ label.btn {
5492
6185
  --bs-tooltip-padding-y: 0.375rem;
5493
6186
  --bs-tooltip-font-size: 0.75rem;
5494
6187
  --bs-tooltip-opacity: 1;
6188
+ --moo-tooltip-motion-duration: 150ms;
6189
+ --moo-tooltip-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
6190
+ --moo-tooltip-motion-scale: 0.95;
6191
+ --moo-tooltip-motion-translate: 0.25rem;
5495
6192
  line-height: 1.333;
5496
6193
  }
6194
+ .tooltip.fade .tooltip-inner {
6195
+ transition: transform var(--moo-tooltip-motion-duration) var(--moo-tooltip-motion-easing);
6196
+ transform: scale(var(--moo-tooltip-motion-scale));
6197
+ transform-origin: center;
6198
+ will-change: transform;
6199
+ }
6200
+ .tooltip.show .tooltip-inner {
6201
+ transform: translate3d(0, 0, 0) scale(1);
6202
+ }
6203
+ .bs-tooltip-top.fade:not(.show) .tooltip-inner,
6204
+ .bs-tooltip-auto[data-popper-placement^="top"].fade:not(.show) .tooltip-inner {
6205
+ transform: translate3d(0, var(--moo-tooltip-motion-translate), 0) scale(var(--moo-tooltip-motion-scale));
6206
+ }
6207
+ .bs-tooltip-bottom.fade:not(.show) .tooltip-inner,
6208
+ .bs-tooltip-auto[data-popper-placement^="bottom"].fade:not(.show) .tooltip-inner {
6209
+ transform: translate3d(0, calc(var(--moo-tooltip-motion-translate) * -1), 0) scale(var(--moo-tooltip-motion-scale));
6210
+ }
6211
+ .bs-tooltip-start.fade:not(.show) .tooltip-inner,
6212
+ .bs-tooltip-auto[data-popper-placement^="left"].fade:not(.show) .tooltip-inner {
6213
+ transform: translate3d(var(--moo-tooltip-motion-translate), 0, 0) scale(var(--moo-tooltip-motion-scale));
6214
+ }
6215
+ .bs-tooltip-end.fade:not(.show) .tooltip-inner,
6216
+ .bs-tooltip-auto[data-popper-placement^="right"].fade:not(.show) .tooltip-inner {
6217
+ transform: translate3d(calc(var(--moo-tooltip-motion-translate) * -1), 0, 0) scale(var(--moo-tooltip-motion-scale));
6218
+ }
6219
+ @media (prefers-reduced-motion: reduce) {
6220
+ .tooltip.fade .tooltip-inner {
6221
+ transition: none;
6222
+ transform: none;
6223
+ will-change: auto;
6224
+ }
6225
+ }
5497
6226
  .tooltip-trigger {
5498
6227
  color: var(--moo-foreground);
5499
6228
  text-decoration-line: underline;
@@ -5501,12 +6230,8 @@ label.btn {
5501
6230
  text-decoration-color: var(--moo-muted-foreground);
5502
6231
  text-underline-offset: 0.2em;
5503
6232
  }
5504
- .tooltip-kbd {
5505
- padding: 0.125rem 0.375rem;
5506
- font-size: 0.75rem;
5507
- color: var(--bs-body-bg);
5508
- background-color: var(--bs-body-color);
5509
- border-radius: var(--bs-border-radius-sm);
6233
+ .tooltip-inner kbd {
6234
+ margin-inline-start: 0.25rem;
5510
6235
  }
5511
6236
  .popover {
5512
6237
  --bs-popover-border-radius: var(--bs-border-radius-lg);
@@ -5536,6 +6261,7 @@ label.btn {
5536
6261
  --bs-modal-border-color: var(--moo-border);
5537
6262
  --bs-modal-header-border-width: 0;
5538
6263
  --bs-modal-footer-border-color: var(--moo-border);
6264
+ --bs-modal-footer-bg: color-mix(in srgb, var(--bs-secondary-bg) 50%, transparent);
5539
6265
  --bs-modal-title-line-height: 1;
5540
6266
  }
5541
6267
  .modal[tabindex]:focus-visible {
@@ -5554,6 +6280,7 @@ label.btn {
5554
6280
  .modal--alert {
5555
6281
  --bs-modal-width: 24rem;
5556
6282
  --bs-modal-padding: 1rem;
6283
+ --bs-modal-footer-bg: color-mix(in srgb, var(--bs-secondary-bg) 50%, transparent);
5557
6284
  }
5558
6285
  .modal-header--alert {
5559
6286
  align-items: flex-start;
@@ -5589,12 +6316,94 @@ label.btn {
5589
6316
  .toast {
5590
6317
  --bs-toast-border-radius: var(--bs-border-radius-lg);
5591
6318
  --bs-toast-border-color: var(--moo-border);
6319
+ --bs-toast-bg: var(--bs-body-bg);
5592
6320
  --bs-toast-box-shadow: var(--bs-box-shadow-lg);
6321
+ --bs-toast-header-bg: var(--bs-body-bg);
5593
6322
  --bs-toast-padding-x: 1rem;
5594
6323
  }
6324
+ .toast-container {
6325
+ z-index: var(--bs-toast-zindex, 1090);
6326
+ }
5595
6327
  .toast-header strong {
5596
6328
  font-weight: 500;
5597
6329
  }
6330
+ .toast-status-icon {
6331
+ display: inline-flex;
6332
+ flex: 0 0 auto;
6333
+ margin-inline-end: 0.5rem;
6334
+ color: var(--bs-secondary-color);
6335
+ }
6336
+ .toast-status-icon [data-icon] {
6337
+ width: 1rem;
6338
+ height: 1rem;
6339
+ }
6340
+ .toast[data-toast-variant="success"] .toast-status-icon {
6341
+ color: var(--moo-success);
6342
+ }
6343
+ .toast[data-toast-variant="info"] .toast-status-icon {
6344
+ color: var(--moo-info);
6345
+ }
6346
+ .toast[data-toast-variant="warning"] .toast-status-icon {
6347
+ color: var(--moo-warning);
6348
+ }
6349
+ .toast[data-toast-variant="destructive"] .toast-status-icon {
6350
+ color: var(--moo-destructive);
6351
+ }
6352
+ .toast[data-toast-variant="loading"] .toast-status-icon [data-icon] {
6353
+ animation: moo-spinner-rotate 0.75s linear infinite;
6354
+ }
6355
+ .toast-container--stacked[data-toast-stack="deck"] {
6356
+ --moo-toast-stack-gap: 0.75rem;
6357
+ --moo-toast-stack-peek: 0.75rem;
6358
+ --moo-toast-stack-scale-step: 0.1;
6359
+ --moo-toast-stack-min-scale: 0.5;
6360
+ --moo-toast-stack-enter-y: 150%;
6361
+ }
6362
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] {
6363
+ bottom: 1rem !important;
6364
+ inset-inline-end: 1rem !important;
6365
+ height: 0;
6366
+ max-width: calc(100vw - 2rem);
6367
+ padding: 0 !important;
6368
+ width: min(24rem, calc(100vw - 2rem));
6369
+ }
6370
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-index] {
6371
+ inset-block-end: 0;
6372
+ inset-inline-end: 0;
6373
+ max-width: none;
6374
+ margin-bottom: 0;
6375
+ position: absolute;
6376
+ width: 100%;
6377
+ transform: translateY(var(--moo-toast-stack-collapsed-y, 0px)) scale(var(--moo-toast-stack-scale, 1));
6378
+ transform-origin: bottom center;
6379
+ z-index: var(--moo-toast-stack-z, 1);
6380
+ transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, height 0.15s ease;
6381
+ }
6382
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-entering] {
6383
+ transform: translateY(calc(var(--moo-toast-stack-collapsed-y, 0px) + var(--moo-toast-stack-enter-y, 150%))) scale(var(--moo-toast-stack-scale, 1));
6384
+ }
6385
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-limited] {
6386
+ opacity: 0;
6387
+ pointer-events: none;
6388
+ }
6389
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:hover > .toast[data-toast-stack-index],
6390
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:focus-within > .toast[data-toast-stack-index],
6391
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active][data-toast-stack-hovering] > .toast[data-toast-stack-index] {
6392
+ transform: translateY(var(--moo-toast-stack-expanded-y, 0px)) scale(1);
6393
+ }
6394
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:hover > .toast[data-toast-stack-entering],
6395
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active]:focus-within > .toast[data-toast-stack-entering],
6396
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active][data-toast-stack-hovering] > .toast[data-toast-stack-entering] {
6397
+ transform: translateY(calc(var(--moo-toast-stack-collapsed-y, 0px) + var(--moo-toast-stack-enter-y, 150%))) scale(var(--moo-toast-stack-scale, 1));
6398
+ }
6399
+ @media (prefers-reduced-motion: reduce) {
6400
+ .toast[data-toast-variant="loading"] .toast-status-icon [data-icon] {
6401
+ animation: none;
6402
+ }
6403
+ .toast-container--stacked[data-toast-stack="deck"][data-toast-stack-active] > .toast[data-toast-stack-index] {
6404
+ transition: none;
6405
+ }
6406
+ }
5598
6407
  .field {
5599
6408
  display: flex;
5600
6409
  flex-direction: column;
@@ -5604,9 +6413,30 @@ label.btn {
5604
6413
  margin-bottom: 0;
5605
6414
  font-weight: 500;
5606
6415
  }
5607
- .field:has(> .is-invalid) > .form-label {
6416
+ .field[data-invalid="true"] {
5608
6417
  color: var(--bs-form-invalid-color);
5609
6418
  }
6419
+ .field--switch {
6420
+ flex-direction: row;
6421
+ align-items: flex-start;
6422
+ justify-content: space-between;
6423
+ gap: 1.25rem;
6424
+ }
6425
+ .field--switch > :first-child {
6426
+ min-width: 0;
6427
+ }
6428
+ .field--switch > label {
6429
+ flex: 0 0 auto;
6430
+ margin: 0;
6431
+ }
6432
+ .field--switch .form-label {
6433
+ margin-bottom: 0.25rem;
6434
+ font-weight: 500;
6435
+ }
6436
+ .field--disabled {
6437
+ opacity: 0.5;
6438
+ pointer-events: none;
6439
+ }
5610
6440
  .field-description,
5611
6441
  .field-error {
5612
6442
  margin-top: 0;
@@ -5645,6 +6475,206 @@ label.btn {
5645
6475
  .field-fieldset + hr {
5646
6476
  opacity: 0.1;
5647
6477
  }
6478
+ .moo-datepicker {
6479
+ --moo-datepicker-width: 17.5rem;
6480
+ --moo-datepicker-popover-offset: 0.375rem;
6481
+ position: relative;
6482
+ width: 100%;
6483
+ max-width: var(--moo-datepicker-width);
6484
+ }
6485
+ .moo-datepicker__trigger {
6486
+ width: 100%;
6487
+ justify-content: flex-start;
6488
+ text-align: start;
6489
+ }
6490
+ .moo-datepicker__trigger [data-datepicker-label] {
6491
+ min-width: 0;
6492
+ overflow: hidden;
6493
+ text-overflow: ellipsis;
6494
+ }
6495
+ .moo-datepicker__trigger.is-invalid {
6496
+ border-color: var(--bs-form-invalid-border-color);
6497
+ color: var(--bs-form-invalid-color);
6498
+ }
6499
+ .moo-datepicker-time-row {
6500
+ display: flex;
6501
+ flex-wrap: wrap;
6502
+ align-items: flex-end;
6503
+ gap: 0.75rem;
6504
+ width: 100%;
6505
+ }
6506
+ .moo-datepicker-time-row .moo-datepicker {
6507
+ flex: 1 1 12rem;
6508
+ width: auto;
6509
+ }
6510
+ .moo-datepicker-time {
6511
+ flex: 0 0 auto;
6512
+ width: calc(17.5rem / 2);
6513
+ max-width: 9rem;
6514
+ }
6515
+ .moo-datepicker__popover {
6516
+ position: absolute;
6517
+ inset-block-start: calc(100% + var(--moo-datepicker-popover-offset));
6518
+ inset-inline-start: 0;
6519
+ z-index: 1000;
6520
+ width: max-content;
6521
+ max-width: calc(100vw - 1rem);
6522
+ padding: 0.75rem;
6523
+ border: var(--bs-border-width) solid var(--bs-border-color);
6524
+ border-radius: var(--bs-border-radius-lg);
6525
+ background: var(--bs-body-bg);
6526
+ color: var(--bs-body-color);
6527
+ box-shadow: var(--bs-box-shadow-lg);
6528
+ }
6529
+ .moo-datepicker__popover[hidden] {
6530
+ display: none !important;
6531
+ }
6532
+ .moo-datepicker__popover.show {
6533
+ display: block;
6534
+ }
6535
+ .moo-datepicker__popover[data-datepicker-placement] {
6536
+ inset: auto;
6537
+ }
6538
+ .moo-calendar {
6539
+ --moo-datepicker-day-size: 2rem;
6540
+ --moo-datepicker-gap: 0.25rem;
6541
+ --moo-datepicker-padding: 0.75rem;
6542
+ --moo-datepicker-preset-gap: 0.375rem;
6543
+ --moo-datepicker-day-border-radius: var(--bs-border-radius-sm);
6544
+ --moo-datepicker-day-range-joined-border-radius: 0;
6545
+ width: calc(var(--moo-datepicker-day-size) * 7 + var(--moo-datepicker-gap) * 6);
6546
+ max-width: 100%;
6547
+ color: var(--bs-body-color);
6548
+ }
6549
+ .moo-calendar__header {
6550
+ display: grid;
6551
+ grid-template-columns: var(--moo-datepicker-day-size) minmax(0, 1fr) var(--moo-datepicker-day-size);
6552
+ align-items: center;
6553
+ gap: var(--moo-datepicker-gap);
6554
+ margin-bottom: 0.75rem;
6555
+ }
6556
+ .moo-calendar__caption {
6557
+ display: inline-flex;
6558
+ min-width: 0;
6559
+ align-items: center;
6560
+ justify-content: center;
6561
+ gap: var(--moo-datepicker-gap);
6562
+ font-weight: 500;
6563
+ }
6564
+ .moo-calendar__select {
6565
+ min-width: 0;
6566
+ height: calc(1.42857em + 0.5rem + calc(var(--bs-border-width) * 2));
6567
+ padding: 0 0.375rem;
6568
+ border: var(--bs-border-width) solid var(--bs-border-color);
6569
+ border-radius: var(--bs-border-radius-sm);
6570
+ background: var(--bs-body-bg);
6571
+ color: var(--bs-body-color);
6572
+ font: inherit;
6573
+ }
6574
+ .moo-calendar__nav {
6575
+ color: var(--bs-secondary-color);
6576
+ }
6577
+ .moo-calendar__nav:hover,
6578
+ .moo-calendar__nav:focus-visible {
6579
+ color: var(--bs-body-color);
6580
+ }
6581
+ .moo-calendar__nav-icon {
6582
+ font-size: 1.09375rem;
6583
+ line-height: 1;
6584
+ }
6585
+ .moo-calendar__weekdays,
6586
+ .moo-calendar__week {
6587
+ display: grid;
6588
+ grid-template-columns: repeat(7, var(--moo-datepicker-day-size));
6589
+ gap: var(--moo-datepicker-gap);
6590
+ }
6591
+ .moo-calendar__week + .moo-calendar__week {
6592
+ margin-top: var(--moo-datepicker-gap);
6593
+ }
6594
+ .moo-calendar__weekdays {
6595
+ margin-bottom: var(--moo-datepicker-gap);
6596
+ }
6597
+ .moo-calendar__weekday {
6598
+ display: inline-flex;
6599
+ align-items: center;
6600
+ justify-content: center;
6601
+ width: var(--moo-datepicker-day-size);
6602
+ height: 1.5rem;
6603
+ color: var(--bs-secondary-color);
6604
+ font-size: 0.76562rem;
6605
+ font-weight: 500;
6606
+ }
6607
+ .moo-calendar__cell {
6608
+ position: relative;
6609
+ width: var(--moo-datepicker-day-size);
6610
+ height: var(--moo-datepicker-day-size);
6611
+ }
6612
+ .moo-calendar__day {
6613
+ position: relative;
6614
+ display: inline-flex;
6615
+ width: var(--moo-datepicker-day-size);
6616
+ height: var(--moo-datepicker-day-size);
6617
+ align-items: center;
6618
+ justify-content: center;
6619
+ padding: 0;
6620
+ border: 0;
6621
+ border-radius: var(--moo-datepicker-day-border-radius);
6622
+ background: transparent;
6623
+ color: var(--bs-body-color);
6624
+ font: inherit;
6625
+ line-height: 1;
6626
+ }
6627
+ .moo-calendar__day:hover:not(:disabled),
6628
+ .moo-calendar__day:focus-visible {
6629
+ background: var(--moo-muted-surface);
6630
+ outline: 0;
6631
+ }
6632
+ .moo-calendar__day:focus-visible {
6633
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
6634
+ }
6635
+ .moo-calendar__day[data-calendar-selected="true"] {
6636
+ background: var(--moo-primary);
6637
+ color: var(--moo-primary-foreground);
6638
+ }
6639
+ .moo-calendar__day[data-calendar-selected="true"]:hover:not(:disabled),
6640
+ .moo-calendar__day[data-calendar-selected="true"]:focus-visible {
6641
+ background: var(--moo-primary);
6642
+ color: var(--moo-primary-foreground);
6643
+ }
6644
+ .moo-calendar__day[data-calendar-range="middle"] {
6645
+ border-radius: var(--moo-datepicker-day-range-joined-border-radius);
6646
+ background: color-mix(in srgb, var(--moo-primary) 14%, transparent);
6647
+ color: var(--bs-body-color);
6648
+ }
6649
+ .moo-calendar__day[data-calendar-range="start"] {
6650
+ border-start-end-radius: var(--moo-datepicker-day-range-joined-border-radius);
6651
+ border-end-end-radius: var(--moo-datepicker-day-range-joined-border-radius);
6652
+ }
6653
+ .moo-calendar__day[data-calendar-range="end"] {
6654
+ border-start-start-radius: var(--moo-datepicker-day-range-joined-border-radius);
6655
+ border-end-start-radius: var(--moo-datepicker-day-range-joined-border-radius);
6656
+ }
6657
+ .moo-calendar__day[data-calendar-outside="true"] {
6658
+ color: var(--bs-secondary-color);
6659
+ }
6660
+ .moo-calendar__day[data-calendar-today="true"]:not([data-calendar-selected="true"]) {
6661
+ outline: var(--bs-border-width) solid var(--bs-border-color);
6662
+ outline-offset: calc(-1 * var(--bs-border-width));
6663
+ }
6664
+ .moo-calendar__day:disabled {
6665
+ color: var(--moo-disabled-foreground);
6666
+ cursor: default;
6667
+ opacity: var(--moo-disabled-control-opacity);
6668
+ }
6669
+ .moo-calendar__presets {
6670
+ display: flex;
6671
+ flex-wrap: wrap;
6672
+ gap: var(--moo-datepicker-preset-gap);
6673
+ margin-top: 0.75rem;
6674
+ }
6675
+ .moo-calendar__preset {
6676
+ flex: 0 0 auto;
6677
+ }
5648
6678
  .combobox {
5649
6679
  --moo-combobox-width: 12.5rem;
5650
6680
  --moo-combobox-multiple-width: 20rem;
@@ -5723,10 +6753,6 @@ label.btn {
5723
6753
  padding-inline: 0.625rem;
5724
6754
  cursor: text;
5725
6755
  }
5726
- .combobox-chips:focus-within {
5727
- border-color: #8b8b8b;
5728
- box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.25);
5729
- }
5730
6756
  .combobox-value {
5731
6757
  display: flex;
5732
6758
  min-width: 0;
@@ -5871,14 +6897,16 @@ label.btn {
5871
6897
  }
5872
6898
  .datatable {
5873
6899
  --moo-datatable-min-width: 48rem;
6900
+ --moo-datatable-actions-cell-fade-width: 1.25rem;
5874
6901
  --moo-datatable-card-label-width: 7rem;
5875
6902
  --moo-datatable-frame-header-min-height: 2.78125rem;
5876
- --moo-datatable-select-cell-inset: 0.89062rem;
6903
+ --moo-datatable-select-cell-inset: 0.82812rem;
5877
6904
  --moo-datatable-table-select-all-offset-y: 0.04688rem;
5878
6905
  --moo-datatable-toolbar-control-height: calc(2rem + var(--bs-border-width) * 2);
5879
6906
  --moo-datatable-search-filter-menu-width: 12.5rem;
5880
6907
  --moo-datatable-search-filter-options-menu-width: 17rem;
5881
6908
  --moo-datatable-scrollbar-size: 0.375rem;
6909
+ --moo-datatable-bulk-actions-bottom: 1rem;
5882
6910
  }
5883
6911
  .datatable-table {
5884
6912
  table-layout: fixed;
@@ -5903,8 +6931,19 @@ label.btn {
5903
6931
  border-radius: var(--bs-border-radius);
5904
6932
  overflow: hidden;
5905
6933
  }
5906
- .datatable-frame:has(.table-row-actions .dropdown-menu.show),
5907
- .datatable-frame .table-responsive:has(.table-row-actions .dropdown-menu.show) {
6934
+ .datatable-frame [data-datatable-column="actions"] {
6935
+ position: sticky;
6936
+ inset-inline-end: 0;
6937
+ z-index: 2;
6938
+ background: linear-gradient(90deg, transparent 0, var(--bs-body-bg) var(--moo-datatable-actions-cell-fade-width));
6939
+ }
6940
+ [dir="rtl"] .datatable-frame [data-datatable-column="actions"],
6941
+ .datatable-frame [dir="rtl"] [data-datatable-column="actions"] {
6942
+ background: linear-gradient(270deg, transparent 0, var(--bs-body-bg) var(--moo-datatable-actions-cell-fade-width));
6943
+ }
6944
+ .datatable-card-frame:has(.datatable-card .dropdown-menu.show) {
6945
+ position: relative;
6946
+ z-index: 1000;
5908
6947
  overflow: visible;
5909
6948
  }
5910
6949
  .datatable-frame-header {
@@ -6213,6 +7252,11 @@ label.btn {
6213
7252
  color: var(--bs-body-color);
6214
7253
  background-color: var(--moo-muted-surface);
6215
7254
  }
7255
+ .datatable-view-toggle .btn-check:focus-visible + .datatable-view-option {
7256
+ z-index: 3;
7257
+ border-color: var(--moo-ring);
7258
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--moo-ring) 50%, transparent);
7259
+ }
6216
7260
  .datatable-view-trigger {
6217
7261
  min-block-size: var(--moo-datatable-toolbar-control-height);
6218
7262
  }
@@ -6334,13 +7378,6 @@ label.btn {
6334
7378
  border-radius: var(--bs-border-radius);
6335
7379
  background-color: var(--bs-body-bg);
6336
7380
  }
6337
- .datatable-card-frame:has(.datatable-card .dropdown-menu.show),
6338
- .datatable-card:has(.dropdown-menu.show) {
6339
- overflow: visible;
6340
- }
6341
- .datatable-card:has(.dropdown-menu.show) {
6342
- z-index: 2;
6343
- }
6344
7381
  .datatable-card-header {
6345
7382
  display: grid;
6346
7383
  grid-template-columns: auto minmax(0, 1fr) auto;
@@ -6468,6 +7505,7 @@ label.btn {
6468
7505
  max-width: 100%;
6469
7506
  justify-self: end;
6470
7507
  overflow-x: auto;
7508
+ overflow-y: hidden;
6471
7509
  -webkit-overflow-scrolling: touch;
6472
7510
  }
6473
7511
  .datatable-page-nav .pagination {
@@ -6484,8 +7522,8 @@ label.btn {
6484
7522
  flex: 0 0 auto;
6485
7523
  align-items: center;
6486
7524
  justify-content: center;
6487
- width: 1em;
6488
- height: 1em;
7525
+ width: 1rem;
7526
+ height: 1rem;
6489
7527
  border: var(--bs-border-width) solid var(--bs-border-color);
6490
7528
  border-radius: var(--moo-datatable-facet-item-border-radius);
6491
7529
  color: transparent;
@@ -6571,7 +7609,7 @@ label.btn {
6571
7609
  --moo-datatable-bulk-actions-backdrop-blur: 8px;
6572
7610
  position: fixed;
6573
7611
  inset-inline-start: 50%;
6574
- inset-block-end: 1rem;
7612
+ inset-block-end: var(--moo-datatable-bulk-actions-bottom);
6575
7613
  transform: translateX(-50%) scale(1);
6576
7614
  transition: transform 0.15s ease-out;
6577
7615
  z-index: var(--bs-zindex-fixed, 1030);
@@ -6724,14 +7762,19 @@ label.btn {
6724
7762
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
6725
7763
  }
6726
7764
 
6727
- :where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-check-input:checked,
6728
- .moo-ui[data-bs-theme="dark"] .form-check-input:checked {
6729
- filter: invert(1);
7765
+ :where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:checked,
7766
+ .moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:checked {
7767
+ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2318181b'/%3e%3c/svg%3e");
7768
+ background-color: var(--moo-primary);
7769
+ border-color: var(--moo-primary);
7770
+ filter: none;
6730
7771
  }
6731
7772
 
6732
- :where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .btn-close,
6733
- .moo-ui[data-bs-theme="dark"] .btn-close {
6734
- filter: var(--bs-btn-close-white-filter);
7773
+ :where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:focus:active:not(:checked),
7774
+ :where(html, body)[data-bs-theme="dark"] .moo-ui:not([data-bs-theme]) .form-switch .form-check-input:focus:not(:focus-visible):not(:checked),
7775
+ .moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:focus:active:not(:checked),
7776
+ .moo-ui[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:focus-visible):not(:checked) {
7777
+ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
6735
7778
  }
6736
7779
 
6737
7780
  .modal-backdrop,