@tempots/beatui 0.83.5 → 0.86.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/dist/beatui.css +861 -470
  2. package/dist/beatui.tailwind.css +861 -470
  3. package/dist/{index-C2_iX1um.cjs → index-4GQLcxme.cjs} +1 -1
  4. package/dist/{index-DiEcd7ZV.js → index-BFe-x3-z.js} +2 -2
  5. package/dist/index-BywbRDsb.cjs +1 -0
  6. package/dist/{index-Bm43lZqE.cjs → index-BzRuy4V1.cjs} +3 -3
  7. package/dist/{index-Di1_W_7Q.js → index-D2_J_-XS.js} +46 -45
  8. package/dist/{index-CEqc0H3v.js → index-DfJMDwSU.js} +1 -1
  9. package/dist/{index-CCMjK4fD.js → index-KNk3k6NI.js} +1 -1
  10. package/dist/{index-BS31JX7x.cjs → index-anrXec7K.cjs} +1 -1
  11. package/dist/{index-C32iUFIr.js → index-vzoI95E1.js} +3 -3
  12. package/dist/{index-BZYWyjM_.cjs → index-yMrXbIdg.cjs} +1 -1
  13. package/dist/index.cjs.js +4 -4
  14. package/dist/index.es.js +2175 -2166
  15. package/dist/json-schema/index.cjs.js +1 -1
  16. package/dist/json-schema/index.es.js +183 -196
  17. package/dist/json-structure/index.cjs.js +1 -1
  18. package/dist/json-structure/index.es.js +93 -93
  19. package/dist/lexical/index.cjs.js +2 -2
  20. package/dist/lexical/index.es.js +5 -5
  21. package/dist/lexical.css +79 -79
  22. package/dist/markdown/index.cjs.js +1 -1
  23. package/dist/markdown/index.es.js +1 -1
  24. package/dist/menu-De_-sGeb.cjs +1 -0
  25. package/dist/menu-Ui4lUPHM.js +373 -0
  26. package/dist/monaco/index.cjs.js +2 -2
  27. package/dist/monaco/index.es.js +2 -2
  28. package/dist/prosemirror/index.cjs.js +1 -1
  29. package/dist/prosemirror/index.es.js +1 -1
  30. package/dist/prosemirror.css +10 -10
  31. package/dist/styles-url-BSUFsmMD.cjs +1 -0
  32. package/dist/styles-url-BvcVGpBJ.js +4 -0
  33. package/dist/styles-url-BzPix7VR.cjs +1 -0
  34. package/dist/styles-url-CCopc5pG.js +4 -0
  35. package/dist/styles-url-CEDSZTyZ.cjs +1 -0
  36. package/dist/styles-url-CSXq0ZRz.js +4 -0
  37. package/dist/styles-url-DZhZ-9Bf.js +4 -0
  38. package/dist/styles-url-YAJ6Q1GS.cjs +1 -0
  39. package/dist/tailwind/preset.cjs.js +1 -1
  40. package/dist/tailwind/preset.es.js +18 -18
  41. package/dist/tailwind/vite-plugin.cjs.js +12 -15
  42. package/dist/tailwind/vite-plugin.es.js +178 -181
  43. package/dist/{theme-B5pmbvQ_.js → theme-BzpMLdvH.js} +6 -6
  44. package/dist/theme-DogY9oT1.cjs +1 -0
  45. package/dist/types/components/form/input/advanced-slider.d.ts +1 -1
  46. package/dist/types/components/form/input/combobox-input.d.ts +2 -0
  47. package/dist/types/components/form/input/combobox-tags-input.d.ts +3 -3
  48. package/dist/types/components/form/input/switch.d.ts +2 -1
  49. package/dist/types/components/theme/theme.d.ts +5 -4
  50. package/dist/types/tailwind/preset.d.ts +1 -1
  51. package/dist/widget-customization-B9Oc1bG4.cjs +1 -0
  52. package/dist/{widget-customization-0is7oTeP.js → widget-customization-Ct2eqKKR.js} +327 -360
  53. package/package.json +2 -2
  54. package/dist/index-DH37GTQj.cjs +0 -1
  55. package/dist/menu-CX72LaZ3.cjs +0 -1
  56. package/dist/menu-D_slbwl8.js +0 -374
  57. package/dist/styles-url-B3p8AqBy.cjs +0 -1
  58. package/dist/styles-url-COuz9fVH.js +0 -4
  59. package/dist/styles-url-CVCcF0ra.cjs +0 -1
  60. package/dist/styles-url-CZUL_YRT.cjs +0 -1
  61. package/dist/styles-url-CzNVxeM7.js +0 -4
  62. package/dist/styles-url-D8MjxiP-.cjs +0 -1
  63. package/dist/styles-url-DUdp56Ts.js +0 -4
  64. package/dist/styles-url-DpP5gepF.js +0 -4
  65. package/dist/theme-Dt6lCAvY.cjs +0 -1
  66. package/dist/widget-customization-B-LmxkPE.cjs +0 -1
@@ -317,23 +317,12 @@
317
317
  --letter-spacing-wide: 0.025em;
318
318
  --letter-spacing-wider: 0.05em;
319
319
  --letter-spacing-widest: 0.1em;
320
- --font-family-sans:
321
- system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
322
- 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
323
- 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
324
- --font-sans:
325
- system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
326
- 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
327
- 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
328
- --font-family-serif:
329
- ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
330
- --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
331
- --font-family-mono:
332
- ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
333
- monospace;
334
- --font-mono:
335
- ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
336
- monospace;
320
+ --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
321
+ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
322
+ --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
323
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
324
+ --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
325
+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
337
326
  --breakpoint-sm: 40rem;
338
327
  --breakpoint-md: 48rem;
339
328
  --breakpoint-lg: 64rem;
@@ -351,21 +340,15 @@
351
340
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
352
341
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
353
342
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
354
- --shadow-lg:
355
- 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
356
- --shadow-xl:
357
- 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
343
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
344
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
358
345
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
359
346
  --shadow-top-2xs: 0 -1px rgb(0 0 0 / 0.05);
360
347
  --shadow-top-xs: 0 -1px 2px 0 rgb(0 0 0 / 0.05);
361
- --shadow-top-sm:
362
- 0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
363
- --shadow-top-md:
364
- 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
365
- --shadow-top-lg:
366
- 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
367
- --shadow-top-xl:
368
- 0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
348
+ --shadow-top-sm: 0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
349
+ --shadow-top-md: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
350
+ --shadow-top-lg: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
351
+ --shadow-top-xl: 0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
369
352
  --shadow-top-2xl: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
370
353
  --motion-duration-instant: 0s;
371
354
  --motion-duration-fast: calc(var(--motion-duration-base) * 0.6);
@@ -379,15 +362,9 @@
379
362
  --text-shadow-none: none;
380
363
  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
381
364
  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
382
- --text-shadow-sm:
383
- 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075),
384
- 0px 2px 2px rgb(0 0 0 / 0.075);
385
- --text-shadow-md:
386
- 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1),
387
- 0px 2px 4px rgb(0 0 0 / 0.1);
388
- --text-shadow-lg:
389
- 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1),
390
- 0px 4px 8px rgb(0 0 0 / 0.1);
365
+ --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
366
+ --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
367
+ --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
391
368
  --z-index-base: 0;
392
369
  --z-index-raised: 10;
393
370
  --z-index-navigation: 20;
@@ -549,10 +526,7 @@
549
526
  --motion-transition-slow: var(--motion-duration-slow);
550
527
  --motion-transition-overlay: var(--motion-duration-relaxed);
551
528
  --motion-transition-emphasis: var(--motion-duration-fast);
552
- --motion-easing-standard: var(--motion-easing-standard);
553
529
  --motion-easing-emphasis: var(--motion-easing-emphasized);
554
- --motion-easing-entrance: var(--motion-easing-entrance);
555
- --motion-easing-exit: var(--motion-easing-exit);
556
530
  --spacing-stack-2xs: calc(var(--spacing-base) / 2);
557
531
  --spacing-stack-xs: calc(var(--spacing-base) * 1);
558
532
  --spacing-stack-sm: calc(var(--spacing-base) * 2);
@@ -574,7 +548,7 @@
574
548
  }
575
549
  @layer base {
576
550
  /* BeatUI theme helpers */
577
- .b-dark {
551
+ .dark {
578
552
  color-scheme: dark;
579
553
  --text-normal: var(--text-normal-dark);
580
554
  --text-muted: var(--text-muted-dark);
@@ -599,7 +573,7 @@
599
573
  background-color: var(--bg-background);
600
574
  }
601
575
 
602
- .b-light {
576
+ .light {
603
577
  color-scheme: light;
604
578
  --text-normal: var(--text-normal-light);
605
579
  --text-muted: var(--text-muted-light);
@@ -624,11 +598,11 @@
624
598
  background-color: var(--bg-background);
625
599
  }
626
600
 
627
- .b-dark *:focus-visible {
601
+ .dark *:focus-visible {
628
602
  outline-color: var(--interactive-focus);
629
603
  }
630
604
 
631
- .b-light *:focus-visible {
605
+ .light *:focus-visible {
632
606
  outline-color: var(--interactive-focus);
633
607
  }
634
608
 
@@ -698,7 +672,7 @@
698
672
  }
699
673
 
700
674
  /* Dark mode focus styles */
701
- .b-dark *:focus-visible {
675
+ .dark *:focus-visible {
702
676
  outline-color: var(--interactive-focus-dark);
703
677
  }
704
678
 
@@ -745,7 +719,7 @@ a:focus-visible {
745
719
  border-radius: var(--radius-pill, var(--radius-full));
746
720
  }
747
721
 
748
- .b-dark .bc-switch:focus-visible .bc-switch__track {
722
+ .dark .bc-switch:focus-visible .bc-switch__track {
749
723
  outline-color: var(--interactive-focus-dark);
750
724
  }
751
725
 
@@ -757,8 +731,8 @@ a:focus-visible {
757
731
  border-radius: var(--radius-focus, var(--radius-sm));
758
732
  }
759
733
 
760
- .b-dark .bc-checkbox-input__checkbox:focus-visible,
761
- .b-dark .bc-radio-input__radio:focus-visible {
734
+ .dark .bc-checkbox-input__checkbox:focus-visible,
735
+ .dark .bc-radio-input__radio:focus-visible {
762
736
  outline-color: var(--interactive-focus-dark);
763
737
  }
764
738
 
@@ -896,11 +870,11 @@ a:focus-visible {
896
870
  --action-card-border: var(--color-primary-600);
897
871
  }
898
872
 
899
- .b-dark .bc-action-card--active {
873
+ .dark .bc-action-card--active {
900
874
  --action-card-border: var(--color-primary-400);
901
875
  }
902
876
 
903
- .b-dark .bc-action-card--active:hover {
877
+ .dark .bc-action-card--active:hover {
904
878
  --action-card-border: var(--color-primary-300);
905
879
  }
906
880
 
@@ -1275,7 +1249,7 @@ a:focus-visible {
1275
1249
  }
1276
1250
 
1277
1251
  /* Dark mode */
1278
- .b-dark .bc-auth-container--styled {
1252
+ .dark .bc-auth-container--styled {
1279
1253
  background-color: var(--bg-surface);
1280
1254
  }
1281
1255
 
@@ -1311,7 +1285,7 @@ a:focus-visible {
1311
1285
  border: 2px solid var(--border-default);
1312
1286
  }
1313
1287
 
1314
- .b-dark .bc-auth-container--styled {
1288
+ .dark .bc-auth-container--styled {
1315
1289
  border-color: var(--border-default);
1316
1290
  }
1317
1291
  }
@@ -1340,7 +1314,7 @@ a:focus-visible {
1340
1314
  border-radius: var(--radius-full);
1341
1315
  }
1342
1316
 
1343
- .b-dark .bc-auth-divider__text {
1317
+ .dark .bc-auth-divider__text {
1344
1318
  color: var(--color-white);
1345
1319
  }
1346
1320
 
@@ -1428,7 +1402,7 @@ a:focus-visible {
1428
1402
  margin-top: var(--spacing-xs);
1429
1403
  }
1430
1404
 
1431
- .b-dark .bc-auth-form__field-error {
1405
+ .dark .bc-auth-form__field-error {
1432
1406
  color: var(--color-danger-400);
1433
1407
  }
1434
1408
 
@@ -1472,11 +1446,11 @@ a:focus-visible {
1472
1446
  outline-offset: 2px;
1473
1447
  }
1474
1448
 
1475
- .b-dark .bc-auth-form__link {
1449
+ .dark .bc-auth-form__link {
1476
1450
  color: var(--color-primary-400);
1477
1451
  }
1478
1452
 
1479
- .b-dark .bc-auth-form__link:hover {
1453
+ .dark .bc-auth-form__link:hover {
1480
1454
  color: var(--color-primary-300);
1481
1455
  background-color: var(--color-primary-950);
1482
1456
  }
@@ -1538,7 +1512,7 @@ a:focus-visible {
1538
1512
  padding: calc(var(--spacing-base) * 1);
1539
1513
  }
1540
1514
 
1541
- .b-dark .bc-social-login-button__icon {
1515
+ .dark .bc-social-login-button__icon {
1542
1516
  background-color: var(--bg-elevated);
1543
1517
  }
1544
1518
 
@@ -1546,7 +1520,7 @@ a:focus-visible {
1546
1520
  color: var(--color-base-900);
1547
1521
  }
1548
1522
 
1549
- .b-dark .bc-social-login-button__icon-inner {
1523
+ .dark .bc-social-login-button__icon-inner {
1550
1524
  color: var(--text-normal);
1551
1525
  }
1552
1526
 
@@ -1721,7 +1695,7 @@ a:focus-visible {
1721
1695
  padding-bottom: var(--spacing-sm);
1722
1696
  }
1723
1697
 
1724
- .b-dark .bc-two-factor__methods {
1698
+ .dark .bc-two-factor__methods {
1725
1699
  border-bottom-color: var(--color-neutral-700);
1726
1700
  }
1727
1701
 
@@ -1749,12 +1723,12 @@ a:focus-visible {
1749
1723
  border-bottom: 2px solid var(--color-primary-600);
1750
1724
  }
1751
1725
 
1752
- .b-dark .bc-two-factor__method-button:hover {
1726
+ .dark .bc-two-factor__method-button:hover {
1753
1727
  color: var(--text-normal);
1754
1728
  background-color: var(--color-neutral-800);
1755
1729
  }
1756
1730
 
1757
- .b-dark .bc-two-factor__method-button--active {
1731
+ .dark .bc-two-factor__method-button--active {
1758
1732
  color: var(--color-primary-400);
1759
1733
  border-bottom-color: var(--color-primary-400);
1760
1734
  }
@@ -1778,7 +1752,7 @@ a:focus-visible {
1778
1752
  text-align: center;
1779
1753
  }
1780
1754
 
1781
- .b-dark .bc-two-factor__code-display {
1755
+ .dark .bc-two-factor__code-display {
1782
1756
  background-color: var(--color-neutral-800);
1783
1757
  }
1784
1758
 
@@ -1807,7 +1781,7 @@ a:focus-visible {
1807
1781
  text-align: center;
1808
1782
  }
1809
1783
 
1810
- .b-dark .bc-two-factor__backup-codes li {
1784
+ .dark .bc-two-factor__backup-codes li {
1811
1785
  background-color: var(--color-neutral-800);
1812
1786
  }
1813
1787
 
@@ -1859,7 +1833,7 @@ a:focus-visible {
1859
1833
  border: 1px solid var(--color-neutral-200);
1860
1834
  }
1861
1835
 
1862
- .b-dark .bc-passkey-item {
1836
+ .dark .bc-passkey-item {
1863
1837
  background-color: var(--color-neutral-900);
1864
1838
  border-color: var(--color-neutral-700);
1865
1839
  }
@@ -2044,18 +2018,18 @@ a:focus-visible {
2044
2018
  }
2045
2019
 
2046
2020
  /* Dark mode styles */
2047
- .b-dark .bc-avatar {
2021
+ .dark .bc-avatar {
2048
2022
  background-color: var(--avatar-bg-dark);
2049
2023
  color: var(--avatar-text-dark);
2050
2024
  }
2051
2025
 
2052
- .b-dark .bc-avatar--bordered {
2026
+ .dark .bc-avatar--bordered {
2053
2027
  border-color: var(--bg-background-dark, var(--color-base-950));
2054
2028
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
2055
2029
  }
2056
2030
 
2057
- .b-dark .bc-avatar-group--spacing-tight > .bc-avatar,
2058
- .b-dark .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
2031
+ .dark .bc-avatar-group--spacing-tight > .bc-avatar,
2032
+ .dark .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
2059
2033
  border-color: var(--bg-background-dark, var(--color-base-950));
2060
2034
  }
2061
2035
 
@@ -2228,13 +2202,13 @@ a:focus-visible {
2228
2202
  }
2229
2203
 
2230
2204
  /* Dark mode styles */
2231
- .b-dark .bc-badge {
2205
+ .dark .bc-badge {
2232
2206
  background-color: var(--badge-bg-dark);
2233
2207
  color: var(--badge-text-dark);
2234
2208
  border-color: var(--badge-border-dark);
2235
2209
  }
2236
2210
 
2237
- .b-dark .bc-badge:hover {
2211
+ .dark .bc-badge:hover {
2238
2212
  background-color: var(--badge-bg-hover-dark);
2239
2213
  color: var(--badge-text-hover-dark);
2240
2214
  }
@@ -2371,25 +2345,25 @@ a:focus-visible {
2371
2345
  }
2372
2346
 
2373
2347
  /* Dark mode */
2374
- .b-dark .bc-block-command-palette {
2348
+ .dark .bc-block-command-palette {
2375
2349
  background: var(--color-base-800);
2376
2350
  border-color: var(--color-base-700);
2377
2351
  }
2378
2352
 
2379
- .b-dark .bc-block-command-palette__search {
2353
+ .dark .bc-block-command-palette__search {
2380
2354
  border-color: var(--color-base-700);
2381
2355
  }
2382
2356
 
2383
- .b-dark .bc-block-command-palette__search-input {
2357
+ .dark .bc-block-command-palette__search-input {
2384
2358
  color: var(--color-base-100);
2385
2359
  }
2386
2360
 
2387
- .b-dark .bc-block-command-palette__item:hover,
2388
- .b-dark .bc-block-command-palette__item--selected {
2361
+ .dark .bc-block-command-palette__item:hover,
2362
+ .dark .bc-block-command-palette__item--selected {
2389
2363
  background: var(--color-base-700);
2390
2364
  }
2391
2365
 
2392
- .b-dark .bc-block-command-palette__item-label {
2366
+ .dark .bc-block-command-palette__item-label {
2393
2367
  color: var(--color-base-100);
2394
2368
  }
2395
2369
 
@@ -2456,8 +2430,8 @@ a:focus-visible {
2456
2430
  outline-offset: 2px;
2457
2431
  }
2458
2432
 
2459
- .b-dark .bc-breadcrumbs__link:focus-visible,
2460
- .b-dark .bc-breadcrumbs__button:focus-visible {
2433
+ .dark .bc-breadcrumbs__link:focus-visible,
2434
+ .dark .bc-breadcrumbs__button:focus-visible {
2461
2435
  outline-color: var(--color-primary-400);
2462
2436
  }
2463
2437
 
@@ -2602,6 +2576,11 @@ a:focus-visible {
2602
2576
  opacity: 0.5;
2603
2577
  }
2604
2578
 
2579
+ .bc-button--loading .bc-icon {
2580
+ width: 1em;
2581
+ height: 1em;
2582
+ }
2583
+
2605
2584
  .bc-button--size-xs {
2606
2585
  font-size: var(--font-size-xs);
2607
2586
  }
@@ -2623,7 +2602,7 @@ a:focus-visible {
2623
2602
  }
2624
2603
 
2625
2604
  /* Dark mode styles */
2626
- .b-dark .bc-button {
2605
+ .dark .bc-button {
2627
2606
  background-color: var(--button-bg-dark);
2628
2607
  color: var(--button-text-dark);
2629
2608
  border-color: var(--button-border-dark);
@@ -2633,7 +2612,7 @@ a:focus-visible {
2633
2612
  );
2634
2613
  }
2635
2614
 
2636
- .b-dark .bc-button:hover:not(:disabled) {
2615
+ .dark .bc-button:hover:not(:disabled) {
2637
2616
  background-color: var(--button-bg-hover-dark);
2638
2617
  color: var(--button-text-hover-dark);
2639
2618
  }
@@ -2731,7 +2710,7 @@ a:focus-visible {
2731
2710
  }
2732
2711
 
2733
2712
  /* Dark mode styles */
2734
- .b-dark .bc-card--elevated {
2713
+ .dark .bc-card--elevated {
2735
2714
  --card-bg: var(--bg-elevated);
2736
2715
  }
2737
2716
 
@@ -2836,25 +2815,25 @@ a:focus-visible {
2836
2815
  user-select: none;
2837
2816
  }
2838
2817
 
2839
- .b-dark .bc-checkbox-input__checkbox {
2818
+ .dark .bc-checkbox-input__checkbox {
2840
2819
  color: var(--color-base-500);
2841
2820
  }
2842
2821
 
2843
- .b-dark .bc-checkbox-input__checkbox--checked {
2822
+ .dark .bc-checkbox-input__checkbox--checked {
2844
2823
  color: var(--color-primary-400);
2845
2824
  }
2846
2825
 
2847
- .b-dark .bc-checkbox-input__checkbox--unchecked {
2826
+ .dark .bc-checkbox-input__checkbox--unchecked {
2848
2827
  color: var(--color-base-500);
2849
2828
  }
2850
2829
 
2851
- .b-dark .bc-checkbox-input__checkbox:focus-visible,
2852
- .b-dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
2830
+ .dark .bc-checkbox-input__checkbox:focus-visible,
2831
+ .dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
2853
2832
  outline: 2px solid var(--interactive-focus);
2854
2833
  outline-offset: 2px;
2855
2834
  }
2856
2835
 
2857
- .b-dark .bc-checkbox-input__label {
2836
+ .dark .bc-checkbox-input__label {
2858
2837
  color: var(--text-normal);
2859
2838
  }
2860
2839
 
@@ -3008,9 +2987,7 @@ a:focus-visible {
3008
2987
  }
3009
2988
 
3010
2989
  /* Dark mode */
3011
- .b-dark
3012
- .bc-input-container--error
3013
- .bc-color-swatch-input__control:focus-within {
2990
+ .dark .bc-input-container--error .bc-color-swatch-input__control:focus-within {
3014
2991
  outline: 2px solid var(--color-danger-400);
3015
2992
  }
3016
2993
 
@@ -3164,6 +3141,12 @@ a:focus-visible {
3164
3141
  border-bottom: 1px solid var(--color-gray-300);
3165
3142
  }
3166
3143
 
3144
+ /* Dark mode */
3145
+ .dark .bc-dropdown__search-input {
3146
+ background-color: var(--color-base-800);
3147
+ border-bottom-color: var(--color-base-600);
3148
+ }
3149
+
3167
3150
  /* Dropdown Component */
3168
3151
  .bc-dropdown {
3169
3152
  position: relative;
@@ -3243,8 +3226,9 @@ a:focus-visible {
3243
3226
  }
3244
3227
 
3245
3228
  .bc-dropdown__option--selected {
3246
- background-color: var(--color-primary-600);
3247
- color: var(--color-white);
3229
+ background-color: var(--color-primary-50);
3230
+ color: var(--color-primary-700);
3231
+ font-weight: var(--font-weight-semibold);
3248
3232
  }
3249
3233
 
3250
3234
  .bc-dropdown__option--disabled {
@@ -3302,31 +3286,32 @@ a:focus-visible {
3302
3286
  }
3303
3287
 
3304
3288
  /* Dark mode styles */
3305
- .b-dark .bc-dropdown__listbox {
3289
+ .dark .bc-dropdown__listbox {
3306
3290
  background-color: var(--bg-surface);
3307
3291
  border-color: var(--border-default);
3308
3292
  color: var(--text-normal);
3309
3293
  }
3310
3294
 
3311
- .b-dark .bc-dropdown__option {
3295
+ .dark .bc-dropdown__option {
3312
3296
  color: var(--text-normal);
3313
3297
  }
3314
3298
 
3315
- .b-dark .bc-dropdown__option:hover {
3299
+ .dark .bc-dropdown__option:hover {
3316
3300
  background-color: var(--interactive-hover);
3317
3301
  }
3318
3302
 
3319
- .b-dark .bc-dropdown__option--focused {
3303
+ .dark .bc-dropdown__option--focused {
3320
3304
  background-color: var(--color-primary-900);
3321
3305
  color: var(--color-primary-100);
3322
3306
  }
3323
3307
 
3324
- .b-dark .bc-dropdown__option--selected {
3325
- background-color: var(--color-primary-500);
3326
- color: var(--color-white);
3308
+ .dark .bc-dropdown__option--selected {
3309
+ background-color: var(--color-primary-900);
3310
+ color: var(--color-primary-200);
3311
+ font-weight: var(--font-weight-semibold);
3327
3312
  }
3328
3313
 
3329
- .b-dark .bc-dropdown__separator {
3314
+ .dark .bc-dropdown__separator {
3330
3315
  border-color: var(--border-divider);
3331
3316
  }
3332
3317
 
@@ -3543,19 +3528,19 @@ a:focus-visible {
3543
3528
  }
3544
3529
 
3545
3530
  /* Dark mode styles */
3546
- .b-dark .bc-control-input-wrapper__label-text--default {
3531
+ .dark .bc-control-input-wrapper__label-text--default {
3547
3532
  color: var(--text-normal);
3548
3533
  }
3549
3534
 
3550
- .b-dark .bc-control-input-wrapper__label-text--error {
3535
+ .dark .bc-control-input-wrapper__label-text--error {
3551
3536
  color: var(--color-danger-300);
3552
3537
  }
3553
3538
 
3554
- .b-dark .bc-control-input-wrapper__required {
3539
+ .dark .bc-control-input-wrapper__required {
3555
3540
  color: var(--color-danger-400);
3556
3541
  }
3557
3542
 
3558
- .b-dark .bc-control-input-wrapper__error {
3543
+ .dark .bc-control-input-wrapper__error {
3559
3544
  color: var(--color-danger-400);
3560
3545
  }
3561
3546
 
@@ -3718,11 +3703,11 @@ a:focus-visible {
3718
3703
  }
3719
3704
 
3720
3705
  /* Dark mode styles */
3721
- .b-dark .bc-divider--labeled.bc-divider--tone-subtle .bc-divider__label {
3706
+ .dark .bc-divider--labeled.bc-divider--tone-subtle .bc-divider__label {
3722
3707
  color: var(--color-base-500);
3723
3708
  }
3724
3709
 
3725
- .b-dark .bc-divider--labeled.bc-divider--tone-strong .bc-divider__label {
3710
+ .dark .bc-divider--labeled.bc-divider--tone-strong .bc-divider__label {
3726
3711
  color: var(--text-normal);
3727
3712
  }
3728
3713
 
@@ -4028,18 +4013,18 @@ a:focus-visible {
4028
4013
  }
4029
4014
 
4030
4015
  /* Dark mode styles */
4031
- .b-dark .bc-drawer {
4016
+ .dark .bc-drawer {
4032
4017
  background-color: var(--bg-surface);
4033
4018
  color: var(--text-normal);
4034
4019
  border: 1px solid var(--border-default);
4035
4020
  }
4036
4021
 
4037
- .b-dark .bc-drawer__header {
4022
+ .dark .bc-drawer__header {
4038
4023
  border-bottom: 1px solid var(--border-divider);
4039
4024
  background-color: var(--bg-elevated);
4040
4025
  }
4041
4026
 
4042
- .b-dark .bc-drawer__footer {
4027
+ .dark .bc-drawer__footer {
4043
4028
  border-top: 1px solid var(--border-divider);
4044
4029
  background-color: var(--bg-elevated);
4045
4030
  }
@@ -4168,21 +4153,21 @@ a:focus-visible {
4168
4153
  }
4169
4154
 
4170
4155
  /* Dark mode styles */
4171
- .b-dark .bc-editable-text {
4156
+ .dark .bc-editable-text {
4172
4157
  border-bottom-color: var(--border-default);
4173
4158
  color: var(--text-normal);
4174
4159
  }
4175
4160
 
4176
- .b-dark .bc-editable-text__edit-button {
4161
+ .dark .bc-editable-text__edit-button {
4177
4162
  color: var(--color-yellow-400);
4178
4163
  }
4179
4164
 
4180
- .b-dark .bc-editable-text__edit-button:hover {
4165
+ .dark .bc-editable-text__edit-button:hover {
4181
4166
  background-color: var(--interactive-hover);
4182
4167
  color: var(--color-yellow-300);
4183
4168
  }
4184
4169
 
4185
- .b-dark .bc-editable-text__edit-button:active {
4170
+ .dark .bc-editable-text__edit-button:active {
4186
4171
  background-color: var(--interactive-active);
4187
4172
  }
4188
4173
 
@@ -4825,6 +4810,218 @@ a:focus-visible {
4825
4810
  opacity: 0.6;
4826
4811
  }
4827
4812
 
4813
+ /* Dark mode */
4814
+ .dark .bc-file-input__drop-zone {
4815
+ border-color: var(--color-base-600);
4816
+ }
4817
+
4818
+ .dark .bc-file-input__drop-zone:hover {
4819
+ border-color: var(--color-primary-400);
4820
+ background-color: color-mix(
4821
+ in srgb,
4822
+ var(--color-primary-500) 10%,
4823
+ transparent
4824
+ );
4825
+ }
4826
+
4827
+ .dark .bc-file-input__drop-zone-content--empty {
4828
+ color: var(--color-base-400);
4829
+ }
4830
+
4831
+ .dark .bc-file-input__drop-zone-content--drag-over {
4832
+ color: var(--color-primary-300);
4833
+ background-color: color-mix(
4834
+ in srgb,
4835
+ var(--color-primary-500) 10%,
4836
+ transparent
4837
+ );
4838
+ }
4839
+
4840
+ .dark .bc-file-input__drop-zone-content--has-files {
4841
+ color: var(--color-base-400);
4842
+ }
4843
+
4844
+ .dark .bc-file-input__file-list {
4845
+ border-top-color: var(--color-base-700);
4846
+ }
4847
+
4848
+ .dark .bc-file-input__file-item {
4849
+ border-color: var(--color-base-700);
4850
+ background-color: var(--bg-surface);
4851
+ }
4852
+
4853
+ .dark .bc-file-input__file-item:hover {
4854
+ border-color: var(--color-base-600);
4855
+ }
4856
+
4857
+ .dark .bc-file-input__file-name {
4858
+ color: var(--text-normal);
4859
+ }
4860
+
4861
+ .dark .bc-file-input__file-meta {
4862
+ color: var(--color-base-400);
4863
+ }
4864
+
4865
+ .dark .bc-file-input__thumbnail-container {
4866
+ background-color: var(--color-base-800);
4867
+ }
4868
+
4869
+ .dark .bc-file-input__remove-button {
4870
+ color: var(--color-base-500);
4871
+ }
4872
+
4873
+ .dark .bc-file-input__remove-button:hover {
4874
+ background-color: color-mix(
4875
+ in srgb,
4876
+ var(--color-danger-500) 15%,
4877
+ transparent
4878
+ );
4879
+ color: var(--color-danger-400);
4880
+ }
4881
+
4882
+ .dark .bc-file-input__clear-all-button {
4883
+ border-color: var(--color-base-600);
4884
+ background-color: var(--bg-surface);
4885
+ color: var(--color-base-400);
4886
+ }
4887
+
4888
+ .dark .bc-file-input__clear-all-button:hover {
4889
+ border-color: var(--color-danger-600);
4890
+ background-color: color-mix(
4891
+ in srgb,
4892
+ var(--color-danger-500) 15%,
4893
+ transparent
4894
+ );
4895
+ color: var(--color-danger-400);
4896
+ }
4897
+
4898
+ .dark .bc-base-input-container--error .bc-file-input__drop-zone {
4899
+ border-color: var(--color-danger-600);
4900
+ }
4901
+
4902
+ .dark .bc-base-input-container--error .bc-file-input__drop-zone:hover {
4903
+ border-color: var(--color-danger-500);
4904
+ background-color: color-mix(
4905
+ in srgb,
4906
+ var(--color-danger-500) 10%,
4907
+ transparent
4908
+ );
4909
+ }
4910
+
4911
+ .dark .bc-base-input-container--disabled .bc-file-input__drop-zone {
4912
+ border-color: var(--color-base-700);
4913
+ background-color: var(--color-base-800);
4914
+ }
4915
+
4916
+ .dark .bc-base-input-container--disabled .bc-file-input__drop-zone:hover {
4917
+ border-color: var(--color-base-700);
4918
+ background-color: var(--color-base-800);
4919
+ }
4920
+
4921
+ .dark .bc-base-input-container--disabled .bc-file-input__drop-zone-content {
4922
+ color: var(--color-base-600);
4923
+ }
4924
+
4925
+ .dark .bc-file-input__compact-placeholder {
4926
+ color: var(--color-base-400);
4927
+ }
4928
+
4929
+ .dark .bc-file-input__compact-value {
4930
+ color: var(--text-normal);
4931
+ }
4932
+
4933
+ .dark .bc-file-input__compact-value-item {
4934
+ background-color: var(--color-base-800);
4935
+ }
4936
+
4937
+ .dark .bc-file-input__compact-clear {
4938
+ color: var(--color-base-500);
4939
+ }
4940
+
4941
+ .dark .bc-file-input__compact-clear:hover {
4942
+ background-color: color-mix(
4943
+ in srgb,
4944
+ var(--color-danger-500) 15%,
4945
+ transparent
4946
+ );
4947
+ color: var(--color-danger-400);
4948
+ }
4949
+
4950
+ .dark .bc-file-input__compact-preview {
4951
+ background-color: var(--color-base-800);
4952
+ }
4953
+
4954
+ .dark .bc-file-input__compact-drop-zone {
4955
+ border-color: var(--color-base-600);
4956
+ }
4957
+
4958
+ .dark .bc-file-input__compact-drop-zone:hover {
4959
+ border-color: var(--color-primary-400);
4960
+ background-color: color-mix(
4961
+ in srgb,
4962
+ var(--color-primary-500) 10%,
4963
+ transparent
4964
+ );
4965
+ }
4966
+
4967
+ .dark .bc-file-input__compact-drop-zone .bc-file-input__compact-placeholder {
4968
+ color: var(--color-base-400);
4969
+ }
4970
+
4971
+ .dark .bc-file-input__compact-file-item {
4972
+ background-color: var(--color-base-800);
4973
+ }
4974
+
4975
+ .dark .bc-file-input__compact-file-item:hover {
4976
+ background-color: var(--color-base-700);
4977
+ }
4978
+
4979
+ .dark .bc-file-input__compact-file-name {
4980
+ color: var(--text-normal);
4981
+ }
4982
+
4983
+ .dark .bc-file-input__compact-file-meta {
4984
+ color: var(--color-base-400);
4985
+ }
4986
+
4987
+ .dark .bc-file-input__compact-remove-button {
4988
+ color: var(--color-base-500);
4989
+ }
4990
+
4991
+ .dark .bc-file-input__compact-remove-button:hover {
4992
+ background-color: color-mix(
4993
+ in srgb,
4994
+ var(--color-danger-500) 15%,
4995
+ transparent
4996
+ );
4997
+ color: var(--color-danger-400);
4998
+ }
4999
+
5000
+ .dark .bc-base-input-container--error .bc-file-input__compact-drop-zone {
5001
+ border-color: var(--color-danger-600);
5002
+ }
5003
+
5004
+ .dark .bc-base-input-container--error .bc-file-input__compact-drop-zone:hover {
5005
+ border-color: var(--color-danger-500);
5006
+ background-color: color-mix(
5007
+ in srgb,
5008
+ var(--color-danger-500) 10%,
5009
+ transparent
5010
+ );
5011
+ }
5012
+
5013
+ .dark .bc-base-input-container--disabled .bc-file-input__compact-drop-zone {
5014
+ border-color: var(--color-base-700);
5015
+ background-color: var(--color-base-800);
5016
+ }
5017
+
5018
+ .dark
5019
+ .bc-base-input-container--disabled
5020
+ .bc-file-input__compact-drop-zone:hover {
5021
+ border-color: var(--color-base-700);
5022
+ background-color: var(--color-base-800);
5023
+ }
5024
+
4828
5025
  .bc-flyout-container {
4829
5026
  z-index: var(--z-index-popover);
4830
5027
  }
@@ -4866,6 +5063,12 @@ a:focus-visible {
4866
5063
  pointer-events: auto;
4867
5064
  }
4868
5065
 
5066
+ /* Dark mode */
5067
+ .dark .bc-flyout {
5068
+ background-color: var(--color-base-800);
5069
+ border-color: var(--color-base-700);
5070
+ }
5071
+
4869
5072
  .bc-group {
4870
5073
  display: flex;
4871
5074
  flex-direction: row;
@@ -5092,30 +5295,30 @@ a:focus-visible {
5092
5295
  }
5093
5296
 
5094
5297
  /* Dark mode */
5095
- .b-dark .bc-history-timeline__filter {
5298
+ .dark .bc-history-timeline__filter {
5096
5299
  border-color: var(--color-base-600);
5097
5300
  color: var(--color-base-400);
5098
5301
  }
5099
5302
 
5100
- .b-dark .bc-history-timeline__filter:hover {
5303
+ .dark .bc-history-timeline__filter:hover {
5101
5304
  background: var(--color-base-700);
5102
5305
  }
5103
5306
 
5104
- .b-dark .bc-history-timeline__filter--active {
5307
+ .dark .bc-history-timeline__filter--active {
5105
5308
  background: rgba(37, 99, 235, 0.15);
5106
5309
  border-color: var(--color-primary-600);
5107
5310
  color: var(--color-primary-300);
5108
5311
  }
5109
5312
 
5110
- .b-dark .bc-history-timeline__line::after {
5313
+ .dark .bc-history-timeline__line::after {
5111
5314
  background: var(--color-base-700);
5112
5315
  }
5113
5316
 
5114
- .b-dark .bc-history-timeline__target {
5317
+ .dark .bc-history-timeline__target {
5115
5318
  color: var(--color-base-100);
5116
5319
  }
5117
5320
 
5118
- .b-dark .bc-history-timeline__avatar {
5321
+ .dark .bc-history-timeline__avatar {
5119
5322
  background: var(--color-primary-800);
5120
5323
  color: var(--color-primary-200);
5121
5324
  }
@@ -5130,7 +5333,7 @@ a:focus-visible {
5130
5333
  color: var(--icon-color, currentColor);
5131
5334
  }
5132
5335
 
5133
- .b-dark .bc-icon {
5336
+ .dark .bc-icon {
5134
5337
  color: var(--icon-color-dark, var(--icon-color, currentColor));
5135
5338
  }
5136
5339
 
@@ -5246,7 +5449,7 @@ a:focus-visible {
5246
5449
  }
5247
5450
 
5248
5451
  /* Dark mode */
5249
- .b-dark .bc-input-adornment--filled {
5452
+ .dark .bc-input-adornment--filled {
5250
5453
  background-color: var(--bg-subtle);
5251
5454
  }
5252
5455
 
@@ -5434,58 +5637,58 @@ a:focus-visible {
5434
5637
  }
5435
5638
 
5436
5639
  /* Dark mode styles */
5437
- .b-dark .bc-input-container--default {
5640
+ .dark .bc-input-container--default {
5438
5641
  background-color: var(--bg-surface);
5439
5642
  color: var(--text-normal);
5440
5643
  outline: 2px solid var(--border-default);
5441
5644
  }
5442
5645
 
5443
- .b-dark .bc-input-container--default:focus-within {
5646
+ .dark .bc-input-container--default:focus-within {
5444
5647
  outline: 2px solid var(--interactive-focus);
5445
5648
  background-color: var(--bg-elevated);
5446
5649
  }
5447
5650
 
5448
- .b-dark .bc-input-container::placeholder,
5449
- .b-dark .bc-base-input-container::placeholder {
5651
+ .dark .bc-input-container::placeholder,
5652
+ .dark .bc-base-input-container::placeholder {
5450
5653
  color: var(--color-gray-500);
5451
5654
  }
5452
5655
 
5453
- .b-dark .bc-input-container--disabled {
5656
+ .dark .bc-input-container--disabled {
5454
5657
  background-color: var(--bg-subtle);
5455
5658
  outline: 2px solid var(--border-divider);
5456
5659
  opacity: 0.6;
5457
5660
  }
5458
5661
 
5459
- .b-dark .bc-input-container--error {
5662
+ .dark .bc-input-container--error {
5460
5663
  outline: 2px solid var(--color-danger-400);
5461
5664
  background-color: var(--color-danger-950);
5462
5665
  }
5463
5666
 
5464
- .b-dark .bc-input-container--error:focus-within {
5667
+ .dark .bc-input-container--error:focus-within {
5465
5668
  outline: 2px solid var(--color-danger-400);
5466
5669
  background-color: var(--color-danger-900);
5467
5670
  }
5468
5671
 
5469
- .b-dark .bc-input-container__password-toggle {
5672
+ .dark .bc-input-container__password-toggle {
5470
5673
  fill: var(--text-muted);
5471
5674
  }
5472
5675
 
5473
- .b-dark .bc-input-container__password-toggle:hover {
5676
+ .dark .bc-input-container__password-toggle:hover {
5474
5677
  background-color: var(--interactive-hover);
5475
5678
  fill: var(--text-normal);
5476
5679
  }
5477
5680
 
5478
5681
  /* Dark mode for nullable reset */
5479
- .b-dark .bc-input-container__reset {
5682
+ .dark .bc-input-container__reset {
5480
5683
  fill: var(--text-muted);
5481
5684
  }
5482
5685
 
5483
- .b-dark .bc-input-container__reset:hover:not(:disabled) {
5686
+ .dark .bc-input-container__reset:hover:not(:disabled) {
5484
5687
  background-color: var(--interactive-hover);
5485
5688
  fill: var(--text-normal);
5486
5689
  }
5487
5690
 
5488
- .b-dark .bc-input-container__reset:disabled {
5691
+ .dark .bc-input-container__reset:disabled {
5489
5692
  opacity: 0.3;
5490
5693
  }
5491
5694
 
@@ -5632,19 +5835,19 @@ a:focus-visible {
5632
5835
  }
5633
5836
 
5634
5837
  /* Dark mode styles */
5635
- .b-dark .bc-input-wrapper__label-text--default {
5838
+ .dark .bc-input-wrapper__label-text--default {
5636
5839
  color: var(--text-normal);
5637
5840
  }
5638
5841
 
5639
- .b-dark .bc-input-wrapper__label-text--error {
5842
+ .dark .bc-input-wrapper__label-text--error {
5640
5843
  color: var(--color-danger-300);
5641
5844
  }
5642
5845
 
5643
- .b-dark .bc-input-wrapper__required {
5846
+ .dark .bc-input-wrapper__required {
5644
5847
  color: var(--color-danger-400);
5645
5848
  }
5646
5849
 
5647
- .b-dark .bc-input-wrapper__error {
5850
+ .dark .bc-input-wrapper__error {
5648
5851
  color: var(--color-danger-400);
5649
5852
  }
5650
5853
 
@@ -5653,6 +5856,10 @@ a:focus-visible {
5653
5856
  padding-inline-start: calc(var(--spacing-base) * 2);
5654
5857
  }
5655
5858
 
5859
+ .dark .bc-json-schema-object {
5860
+ border-left-color: var(--color-base-700);
5861
+ }
5862
+
5656
5863
  .bc-schema-grid {
5657
5864
  display: grid;
5658
5865
  }
@@ -5796,7 +6003,7 @@ a:focus-visible {
5796
6003
  color: var(--color-neutral-700);
5797
6004
  }
5798
6005
 
5799
- .b-dark .bc-array-control__item-label {
6006
+ .dark .bc-array-control__item-label {
5800
6007
  color: var(--color-neutral-200);
5801
6008
  }
5802
6009
 
@@ -5813,11 +6020,11 @@ a:focus-visible {
5813
6020
  color: var(--color-success-600);
5814
6021
  }
5815
6022
 
5816
- .b-dark .bc-array-control__indicator--error {
6023
+ .dark .bc-array-control__indicator--error {
5817
6024
  color: var(--color-danger-400);
5818
6025
  }
5819
6026
 
5820
- .b-dark .bc-array-control__indicator--success {
6027
+ .dark .bc-array-control__indicator--success {
5821
6028
  color: var(--color-success-400);
5822
6029
  }
5823
6030
 
@@ -5834,11 +6041,11 @@ a:focus-visible {
5834
6041
  font-weight: var(--font-weight-medium);
5835
6042
  }
5836
6043
 
5837
- .b-dark .bc-array-control__summary--success {
6044
+ .dark .bc-array-control__summary--success {
5838
6045
  color: var(--color-success-300);
5839
6046
  }
5840
6047
 
5841
- .b-dark .bc-array-control__summary--error {
6048
+ .dark .bc-array-control__summary--error {
5842
6049
  color: var(--color-danger-300);
5843
6050
  }
5844
6051
 
@@ -5863,7 +6070,7 @@ a:focus-visible {
5863
6070
  flex-shrink: 1;
5864
6071
  }
5865
6072
 
5866
- .b-dark .bc-object-helpers__error {
6073
+ .dark .bc-object-helpers__error {
5867
6074
  color: var(--color-danger-400);
5868
6075
  }
5869
6076
 
@@ -5872,7 +6079,7 @@ a:focus-visible {
5872
6079
  font-size: var(--font-size-sm);
5873
6080
  }
5874
6081
 
5875
- .b-dark .bc-json-schema-form__error {
6082
+ .dark .bc-json-schema-form__error {
5876
6083
  color: var(--color-danger-400);
5877
6084
  }
5878
6085
 
@@ -5925,7 +6132,7 @@ a:focus-visible {
5925
6132
  color: var(--color-neutral-500);
5926
6133
  }
5927
6134
 
5928
- .b-dark .bc-json-schema-display__label {
6135
+ .dark .bc-json-schema-display__label {
5929
6136
  color: var(--color-neutral-400);
5930
6137
  }
5931
6138
 
@@ -5935,7 +6142,7 @@ a:focus-visible {
5935
6142
  font-weight: var(--font-weight-bold);
5936
6143
  }
5937
6144
 
5938
- .b-dark .bc-json-schema-display__required {
6145
+ .dark .bc-json-schema-display__required {
5939
6146
  color: var(--color-danger-400);
5940
6147
  }
5941
6148
 
@@ -5948,7 +6155,7 @@ a:focus-visible {
5948
6155
  font-weight: var(--font-weight-medium);
5949
6156
  }
5950
6157
 
5951
- .b-dark .bc-json-schema-display__deprecated {
6158
+ .dark .bc-json-schema-display__deprecated {
5952
6159
  color: var(--color-warning-300);
5953
6160
  background-color: var(--color-warning-900);
5954
6161
  }
@@ -5964,7 +6171,7 @@ a:focus-visible {
5964
6171
  color: var(--color-neutral-900);
5965
6172
  }
5966
6173
 
5967
- .b-dark .bc-json-schema-display__value {
6174
+ .dark .bc-json-schema-display__value {
5968
6175
  color: var(--color-neutral-100);
5969
6176
  }
5970
6177
 
@@ -5974,7 +6181,7 @@ a:focus-visible {
5974
6181
  font-style: italic;
5975
6182
  }
5976
6183
 
5977
- .b-dark .bc-json-schema-display__value--null {
6184
+ .dark .bc-json-schema-display__value--null {
5978
6185
  color: var(--color-neutral-500);
5979
6186
  }
5980
6187
 
@@ -5984,7 +6191,7 @@ a:focus-visible {
5984
6191
  font-style: italic;
5985
6192
  }
5986
6193
 
5987
- .b-dark .bc-json-schema-display__value--missing {
6194
+ .dark .bc-json-schema-display__value--missing {
5988
6195
  color: var(--color-danger-400);
5989
6196
  }
5990
6197
 
@@ -5994,7 +6201,7 @@ a:focus-visible {
5994
6201
  margin-left: calc(var(--spacing-base) * 1);
5995
6202
  }
5996
6203
 
5997
- .b-dark .bc-json-schema-display__value-context {
6204
+ .dark .bc-json-schema-display__value-context {
5998
6205
  color: var(--color-neutral-500);
5999
6206
  }
6000
6207
 
@@ -6009,11 +6216,11 @@ a:focus-visible {
6009
6216
  color: var(--color-primary-700);
6010
6217
  }
6011
6218
 
6012
- .b-dark .bc-json-schema-display__link {
6219
+ .dark .bc-json-schema-display__link {
6013
6220
  color: var(--color-primary-400);
6014
6221
  }
6015
6222
 
6016
- .b-dark .bc-json-schema-display__link:hover {
6223
+ .dark .bc-json-schema-display__link:hover {
6017
6224
  color: var(--color-primary-300);
6018
6225
  }
6019
6226
 
@@ -6033,7 +6240,7 @@ a:focus-visible {
6033
6240
  vertical-align: middle;
6034
6241
  }
6035
6242
 
6036
- .b-dark .bc-json-schema-display__color-swatch {
6243
+ .dark .bc-json-schema-display__color-swatch {
6037
6244
  border-color: var(--color-neutral-600);
6038
6245
  }
6039
6246
 
@@ -6057,7 +6264,7 @@ a:focus-visible {
6057
6264
  overflow-x: auto;
6058
6265
  }
6059
6266
 
6060
- .b-dark .bc-json-schema-display__pre {
6267
+ .dark .bc-json-schema-display__pre {
6061
6268
  background-color: var(--color-neutral-800);
6062
6269
  border-color: var(--color-neutral-700);
6063
6270
  }
@@ -6082,12 +6289,12 @@ a:focus-visible {
6082
6289
  background-color: var(--color-danger-100);
6083
6290
  }
6084
6291
 
6085
- .b-dark .bc-json-schema-display__boolean--true {
6292
+ .dark .bc-json-schema-display__boolean--true {
6086
6293
  color: var(--color-success-300);
6087
6294
  background-color: var(--color-success-900);
6088
6295
  }
6089
6296
 
6090
- .b-dark .bc-json-schema-display__boolean--false {
6297
+ .dark .bc-json-schema-display__boolean--false {
6091
6298
  color: var(--color-danger-300);
6092
6299
  background-color: var(--color-danger-900);
6093
6300
  }
@@ -6098,7 +6305,7 @@ a:focus-visible {
6098
6305
  padding-inline-start: calc(var(--spacing-base) * 2);
6099
6306
  }
6100
6307
 
6101
- .b-dark .bc-json-schema-display__object {
6308
+ .dark .bc-json-schema-display__object {
6102
6309
  border-left-color: var(--color-neutral-700);
6103
6310
  }
6104
6311
 
@@ -6109,7 +6316,7 @@ a:focus-visible {
6109
6316
  padding-inline-start: calc(var(--spacing-base) * 2);
6110
6317
  }
6111
6318
 
6112
- .b-dark .bc-json-schema-display__extra-property {
6319
+ .dark .bc-json-schema-display__extra-property {
6113
6320
  border-left-color: var(--color-warning-600);
6114
6321
  }
6115
6322
 
@@ -6140,7 +6347,7 @@ a:focus-visible {
6140
6347
  flex-shrink: 0;
6141
6348
  }
6142
6349
 
6143
- .b-dark .bc-json-schema-display__array-index {
6350
+ .dark .bc-json-schema-display__array-index {
6144
6351
  color: var(--color-neutral-500);
6145
6352
  }
6146
6353
 
@@ -6150,7 +6357,7 @@ a:focus-visible {
6150
6357
  font-style: italic;
6151
6358
  }
6152
6359
 
6153
- .b-dark .bc-json-schema-display__empty {
6360
+ .dark .bc-json-schema-display__empty {
6154
6361
  color: var(--color-neutral-500);
6155
6362
  }
6156
6363
 
@@ -6166,7 +6373,7 @@ a:focus-visible {
6166
6373
  margin-bottom: calc(var(--spacing-base) * 1);
6167
6374
  }
6168
6375
 
6169
- .b-dark .bc-json-schema-display__branch-label {
6376
+ .dark .bc-json-schema-display__branch-label {
6170
6377
  color: var(--color-primary-300);
6171
6378
  background-color: var(--color-primary-900);
6172
6379
  }
@@ -6176,7 +6383,7 @@ a:focus-visible {
6176
6383
  background-color: var(--color-warning-100);
6177
6384
  }
6178
6385
 
6179
- .b-dark .bc-json-schema-display__branch-label--ambiguous {
6386
+ .dark .bc-json-schema-display__branch-label--ambiguous {
6180
6387
  color: var(--color-warning-300);
6181
6388
  background-color: var(--color-warning-900);
6182
6389
  }
@@ -6186,7 +6393,7 @@ a:focus-visible {
6186
6393
  background-color: var(--color-danger-100);
6187
6394
  }
6188
6395
 
6189
- .b-dark .bc-json-schema-display__branch-label--no-match {
6396
+ .dark .bc-json-schema-display__branch-label--no-match {
6190
6397
  color: var(--color-danger-300);
6191
6398
  background-color: var(--color-danger-900);
6192
6399
  }
@@ -6243,25 +6450,25 @@ a:focus-visible {
6243
6450
  margin-left: calc(var(--spacing-base) * 1);
6244
6451
  }
6245
6452
 
6246
- .b-dark .bc-json-schema-display__mismatch--type-mismatch,
6247
- .b-dark .bc-json-schema-display__mismatch--missing-required {
6453
+ .dark .bc-json-schema-display__mismatch--type-mismatch,
6454
+ .dark .bc-json-schema-display__mismatch--missing-required {
6248
6455
  color: var(--color-danger-300);
6249
6456
  background-color: var(--color-danger-900);
6250
6457
  }
6251
6458
 
6252
- .b-dark .bc-json-schema-display__mismatch--extra-property,
6253
- .b-dark .bc-json-schema-display__mismatch--enum-mismatch,
6254
- .b-dark .bc-json-schema-display__mismatch--const-mismatch {
6459
+ .dark .bc-json-schema-display__mismatch--extra-property,
6460
+ .dark .bc-json-schema-display__mismatch--enum-mismatch,
6461
+ .dark .bc-json-schema-display__mismatch--const-mismatch {
6255
6462
  color: var(--color-warning-300);
6256
6463
  background-color: var(--color-warning-900);
6257
6464
  }
6258
6465
 
6259
- .b-dark .bc-json-schema-display__mismatch--constraint-violation {
6466
+ .dark .bc-json-schema-display__mismatch--constraint-violation {
6260
6467
  color: var(--color-danger-300);
6261
6468
  background-color: var(--color-danger-900);
6262
6469
  }
6263
6470
 
6264
- .b-dark .bc-json-schema-display__mismatch-indicator {
6471
+ .dark .bc-json-schema-display__mismatch-indicator {
6265
6472
  color: var(--color-danger-400);
6266
6473
  }
6267
6474
 
@@ -6666,6 +6873,76 @@ a:focus-visible {
6666
6873
  color: var(--color-warning-700);
6667
6874
  }
6668
6875
 
6876
+ /* Dark mode */
6877
+ .dark .bc-json-structure-object {
6878
+ border-left-color: var(--color-base-700);
6879
+ }
6880
+
6881
+ .dark .bc-json-structure-additional-property {
6882
+ border-color: var(--color-base-700);
6883
+ background: var(--color-base-800);
6884
+ }
6885
+
6886
+ .dark .bc-json-structure-map-entry-key {
6887
+ color: var(--color-base-300);
6888
+ }
6889
+
6890
+ .dark .bc-json-structure-tuple-label {
6891
+ color: var(--color-base-300);
6892
+ }
6893
+
6894
+ .dark .bc-json-structure-tuple-description {
6895
+ color: var(--color-base-400);
6896
+ }
6897
+
6898
+ .dark .bc-json-structure-tuple-element-header {
6899
+ color: var(--color-base-400);
6900
+ }
6901
+
6902
+ .dark .bc-json-structure-tuple-position {
6903
+ color: var(--color-base-400);
6904
+ }
6905
+
6906
+ .dark .bc-json-structure-description {
6907
+ color: var(--color-base-400);
6908
+ }
6909
+
6910
+ .dark .bc-json-structure-deprecated::before {
6911
+ color: var(--color-warning-400);
6912
+ background: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
6913
+ }
6914
+
6915
+ .dark .bc-json-structure-deprecated-badge {
6916
+ color: var(--color-warning-300);
6917
+ background: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
6918
+ }
6919
+
6920
+ .dark .bc-json-structure-const {
6921
+ background: var(--color-base-800);
6922
+ color: var(--color-base-300);
6923
+ }
6924
+
6925
+ .dark .bc-json-structure-readonly input,
6926
+ .dark .bc-json-structure-readonly select,
6927
+ .dark .bc-json-structure-readonly textarea {
6928
+ background: var(--color-base-800);
6929
+ }
6930
+
6931
+ .dark .bc-json-structure-placeholder {
6932
+ border-color: var(--color-base-600);
6933
+ background: var(--color-base-800);
6934
+ }
6935
+
6936
+ .dark .bc-json-structure-placeholder > span:first-child {
6937
+ color: var(--color-base-500);
6938
+ }
6939
+
6940
+ .dark .bc-json-structure-unknown {
6941
+ border-color: var(--color-warning-700);
6942
+ background: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
6943
+ color: var(--color-warning-300);
6944
+ }
6945
+
6669
6946
  /* Kbd (Keyboard Key) Component */
6670
6947
  .bc-kbd {
6671
6948
  display: inline-flex;
@@ -6675,13 +6952,10 @@ a:focus-visible {
6675
6952
  font-weight: var(--font-weight-medium);
6676
6953
  line-height: 1;
6677
6954
  border-radius: var(--radius-xs);
6678
- background-color: var(--bg-subtle);
6955
+ background-color: var(--bg-surface);
6679
6956
  color: var(--text-muted);
6680
- border: 1px solid var(--border-muted);
6681
- /* box-shadow:
6682
- 0 1px 0 0 var(--border-default),
6683
- 0 2px 3px 0 rgba(0, 0, 0, 0.08),
6684
- 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
6957
+ border: 1px solid var(--border-subtle);
6958
+ box-shadow: rgb(229, 229, 229) 0px 1px 0px;
6685
6959
  white-space: nowrap;
6686
6960
  vertical-align: middle;
6687
6961
  transition:
@@ -6709,7 +6983,7 @@ a:focus-visible {
6709
6983
  }
6710
6984
 
6711
6985
  /* Dark mode styles */
6712
- .b-dark .bc-kbd {
6986
+ .dark .bc-kbd {
6713
6987
  border-color: var(--border-default);
6714
6988
  box-shadow:
6715
6989
  0 1px 0 0 var(--border-default),
@@ -6758,11 +7032,11 @@ a:focus-visible {
6758
7032
  }
6759
7033
 
6760
7034
  /* Dark mode styles */
6761
- .b-dark .bc-label {
7035
+ .dark .bc-label {
6762
7036
  color: var(--text-normal);
6763
7037
  }
6764
7038
 
6765
- .b-dark .bc-label--danger {
7039
+ .dark .bc-label--danger {
6766
7040
  color: var(--color-danger-400);
6767
7041
  }
6768
7042
 
@@ -7031,7 +7305,7 @@ a:focus-visible {
7031
7305
  border-radius: var(--radius-xs, 0.25rem);
7032
7306
  }
7033
7307
 
7034
- .b-dark .bc-lexical-code {
7308
+ .dark .bc-lexical-code {
7035
7309
  background-color: var(--color-neutral-800);
7036
7310
  color: var(--color-neutral-200);
7037
7311
  }
@@ -7080,71 +7354,71 @@ a:focus-visible {
7080
7354
  color: var(--color-neutral-500);
7081
7355
  }
7082
7356
 
7083
- .b-dark .bc-lexical-li-checked::before {
7357
+ .dark .bc-lexical-li-checked::before {
7084
7358
  background-color: var(--color-primary-400);
7085
7359
  border-color: var(--color-primary-400);
7086
7360
  }
7087
7361
 
7088
- .b-dark .bc-lexical-li-unchecked::before {
7362
+ .dark .bc-lexical-li-unchecked::before {
7089
7363
  border-color: var(--color-neutral-600);
7090
7364
  }
7091
7365
 
7092
7366
  /* Dark mode styles */
7093
- .b-dark .bc-lexical-editor-container {
7367
+ .dark .bc-lexical-editor-container {
7094
7368
  background-color: var(--color-neutral-800);
7095
7369
  border-color: var(--color-neutral-700);
7096
7370
  }
7097
7371
 
7098
- .b-dark .bc-lexical-editor {
7372
+ .dark .bc-lexical-editor {
7099
7373
  background-color: var(--bg-surface);
7100
7374
  color: var(--text-normal);
7101
7375
  }
7102
7376
 
7103
- .b-dark .bc-lexical-editor-container:focus-within {
7377
+ .dark .bc-lexical-editor-container:focus-within {
7104
7378
  border-color: var(--color-primary-400);
7105
7379
  box-shadow: 0 0 0 2px var(--color-primary-900);
7106
7380
  }
7107
7381
 
7108
- .b-dark .bc-lexical-editor-container--error {
7382
+ .dark .bc-lexical-editor-container--error {
7109
7383
  border-color: var(--color-danger-400);
7110
7384
  }
7111
7385
 
7112
- .b-dark .bc-lexical-editor-container--error:focus-within {
7386
+ .dark .bc-lexical-editor-container--error:focus-within {
7113
7387
  border-color: var(--color-danger-400);
7114
7388
  box-shadow: 0 0 0 2px var(--color-danger-900);
7115
7389
  }
7116
7390
 
7117
- .b-dark .bc-lexical-editor--readonly {
7391
+ .dark .bc-lexical-editor--readonly {
7118
7392
  background-color: var(--color-neutral-900);
7119
7393
  }
7120
7394
 
7121
- .b-dark .bc-lexical-editor [data-lexical-placeholder] {
7395
+ .dark .bc-lexical-editor [data-lexical-placeholder] {
7122
7396
  color: var(--color-neutral-500);
7123
7397
  }
7124
7398
 
7125
- .b-dark .bc-lexical-editor blockquote {
7399
+ .dark .bc-lexical-editor blockquote {
7126
7400
  border-left-color: var(--color-neutral-600);
7127
7401
  }
7128
7402
 
7129
- .b-dark .bc-lexical-editor code {
7403
+ .dark .bc-lexical-editor code {
7130
7404
  background-color: var(--color-neutral-800);
7131
7405
  color: var(--color-neutral-200);
7132
7406
  }
7133
7407
 
7134
- .b-dark .bc-lexical-editor pre {
7408
+ .dark .bc-lexical-editor pre {
7135
7409
  background-color: var(--color-neutral-900);
7136
7410
  border-color: var(--color-neutral-700);
7137
7411
  }
7138
7412
 
7139
- .b-dark .bc-lexical-editor a {
7413
+ .dark .bc-lexical-editor a {
7140
7414
  color: var(--color-primary-400);
7141
7415
  }
7142
7416
 
7143
- .b-dark .bc-lexical-editor a:hover {
7417
+ .dark .bc-lexical-editor a:hover {
7144
7418
  color: var(--color-primary-300);
7145
7419
  }
7146
7420
 
7147
- .b-dark .bc-lexical-editor hr {
7421
+ .dark .bc-lexical-editor hr {
7148
7422
  border-top-color: var(--color-neutral-700);
7149
7423
  }
7150
7424
 
@@ -7217,7 +7491,7 @@ a:focus-visible {
7217
7491
  box-shadow: 0 0 0 3px var(--color-primary-100);
7218
7492
  }
7219
7493
 
7220
- .b-dark .bc-lexical-editor-container:focus-within {
7494
+ .dark .bc-lexical-editor-container:focus-within {
7221
7495
  box-shadow: 0 0 0 3px var(--color-primary-900);
7222
7496
  }
7223
7497
  }
@@ -7236,7 +7510,7 @@ a:focus-visible {
7236
7510
  flex-wrap: wrap;
7237
7511
  }
7238
7512
 
7239
- .b-dark .bc-lexical-toolbar {
7513
+ .dark .bc-lexical-toolbar {
7240
7514
  background-color: var(--color-neutral-800);
7241
7515
  }
7242
7516
 
@@ -7245,7 +7519,7 @@ a:focus-visible {
7245
7519
  border-bottom: 1px solid var(--color-neutral-200);
7246
7520
  }
7247
7521
 
7248
- .b-dark .bc-lexical-editor-container > .bc-lexical-toolbar {
7522
+ .dark .bc-lexical-editor-container > .bc-lexical-toolbar {
7249
7523
  border-bottom-color: var(--color-neutral-700);
7250
7524
  }
7251
7525
 
@@ -7255,7 +7529,7 @@ a:focus-visible {
7255
7529
  border-top: 1px solid var(--color-neutral-200);
7256
7530
  }
7257
7531
 
7258
- .b-dark .bc-lexical-toolbar--bottom {
7532
+ .dark .bc-lexical-toolbar--bottom {
7259
7533
  border-top-color: var(--color-neutral-700);
7260
7534
  }
7261
7535
 
@@ -7276,7 +7550,7 @@ a:focus-visible {
7276
7550
  cursor: pointer;
7277
7551
  }
7278
7552
 
7279
- .b-dark .bc-lexical-toolbar-select {
7553
+ .dark .bc-lexical-toolbar-select {
7280
7554
  border-color: var(--color-neutral-600);
7281
7555
  background-color: var(--color-neutral-700);
7282
7556
  color: var(--color-neutral-100);
@@ -7298,7 +7572,7 @@ a:focus-visible {
7298
7572
  background-color: var(--color-neutral-200);
7299
7573
  }
7300
7574
 
7301
- .b-dark .bc-lexical-toolbar-color:hover {
7575
+ .dark .bc-lexical-toolbar-color:hover {
7302
7576
  background-color: var(--color-neutral-600);
7303
7577
  }
7304
7578
 
@@ -7355,7 +7629,7 @@ a:focus-visible {
7355
7629
  animation: bc-floating-toolbar-enter 0.15s ease-out;
7356
7630
  }
7357
7631
 
7358
- .b-dark .bc-floating-toolbar {
7632
+ .dark .bc-floating-toolbar {
7359
7633
  background-color: var(--color-neutral-800);
7360
7634
  border-color: var(--color-neutral-700);
7361
7635
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
@@ -7388,7 +7662,7 @@ a:focus-visible {
7388
7662
  animation: bc-slash-palette-enter 0.12s ease-out;
7389
7663
  }
7390
7664
 
7391
- .b-dark .bc-slash-command-palette {
7665
+ .dark .bc-slash-command-palette {
7392
7666
  background-color: var(--color-neutral-800);
7393
7667
  border-color: var(--color-neutral-700);
7394
7668
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
@@ -7420,8 +7694,8 @@ a:focus-visible {
7420
7694
  background-color: var(--color-primary-50);
7421
7695
  }
7422
7696
 
7423
- .b-dark .bc-slash-command-palette__item:hover,
7424
- .b-dark .bc-slash-command-palette__item[aria-selected='true'] {
7697
+ .dark .bc-slash-command-palette__item:hover,
7698
+ .dark .bc-slash-command-palette__item[aria-selected='true'] {
7425
7699
  background-color: var(--color-primary-900);
7426
7700
  }
7427
7701
 
@@ -7446,7 +7720,7 @@ a:focus-visible {
7446
7720
  margin-bottom: 2px;
7447
7721
  }
7448
7722
 
7449
- .b-dark .bc-slash-command-palette__label {
7723
+ .dark .bc-slash-command-palette__label {
7450
7724
  color: var(--color-neutral-100);
7451
7725
  }
7452
7726
 
@@ -7467,7 +7741,7 @@ a:focus-visible {
7467
7741
  flex-shrink: 0;
7468
7742
  }
7469
7743
 
7470
- .b-dark .bc-slash-command-palette__category {
7744
+ .dark .bc-slash-command-palette__category {
7471
7745
  background-color: var(--color-neutral-700);
7472
7746
  color: var(--color-neutral-400);
7473
7747
  }
@@ -7521,13 +7795,13 @@ a:focus-visible {
7521
7795
  cursor: not-allowed;
7522
7796
  }
7523
7797
 
7524
- .b-dark .bc-block-handle__button {
7798
+ .dark .bc-block-handle__button {
7525
7799
  background-color: var(--color-neutral-800);
7526
7800
  border-color: var(--color-neutral-700);
7527
7801
  color: var(--color-neutral-500);
7528
7802
  }
7529
7803
 
7530
- .b-dark .bc-block-handle__button:hover {
7804
+ .dark .bc-block-handle__button:hover {
7531
7805
  background-color: var(--color-neutral-700);
7532
7806
  color: var(--color-neutral-300);
7533
7807
  border-color: var(--color-neutral-600);
@@ -7603,42 +7877,42 @@ a:focus-visible {
7603
7877
  }
7604
7878
 
7605
7879
  /* Dark mode styles */
7606
- .b-dark .bc-lexical-table-cell,
7607
- .b-dark .bc-lexical-table-cell-header {
7880
+ .dark .bc-lexical-table-cell,
7881
+ .dark .bc-lexical-table-cell-header {
7608
7882
  border-color: var(--color-neutral-700);
7609
7883
  }
7610
7884
 
7611
- .b-dark .bc-lexical-table-row {
7885
+ .dark .bc-lexical-table-row {
7612
7886
  border-bottom-color: var(--color-neutral-700);
7613
7887
  }
7614
7888
 
7615
- .b-dark .bc-lexical-table-cell-header {
7889
+ .dark .bc-lexical-table-cell-header {
7616
7890
  background-color: var(--color-neutral-800);
7617
7891
  }
7618
7892
 
7619
- .b-dark .bc-lexical-table-cell--selected {
7893
+ .dark .bc-lexical-table-cell--selected {
7620
7894
  background-color: var(--color-primary-900);
7621
7895
  outline-color: var(--color-primary-400);
7622
7896
  }
7623
7897
 
7624
- .b-dark .bc-table-context-menu {
7898
+ .dark .bc-table-context-menu {
7625
7899
  background-color: var(--color-neutral-800);
7626
7900
  border-color: var(--color-neutral-700);
7627
7901
  }
7628
7902
 
7629
- .b-dark .bc-table-menu-button {
7903
+ .dark .bc-table-menu-button {
7630
7904
  color: var(--color-neutral-100);
7631
7905
  }
7632
7906
 
7633
- .b-dark .bc-table-menu-button:hover:not(:disabled) {
7907
+ .dark .bc-table-menu-button:hover:not(:disabled) {
7634
7908
  background-color: var(--color-neutral-700);
7635
7909
  }
7636
7910
 
7637
- .b-dark .bc-table-menu-button:active:not(:disabled) {
7911
+ .dark .bc-table-menu-button:active:not(:disabled) {
7638
7912
  background-color: var(--color-neutral-600);
7639
7913
  }
7640
7914
 
7641
- .b-dark .bc-table-menu-separator {
7915
+ .dark .bc-table-menu-separator {
7642
7916
  background-color: var(--color-neutral-700);
7643
7917
  }
7644
7918
 
@@ -7779,97 +8053,97 @@ a:focus-visible {
7779
8053
  }
7780
8054
 
7781
8055
  /* Dark mode styles */
7782
- .b-dark .bc-lexical-code-block {
8056
+ .dark .bc-lexical-code-block {
7783
8057
  background-color: var(--color-neutral-900);
7784
8058
  border-color: var(--color-neutral-700);
7785
8059
  color: var(--color-neutral-100);
7786
8060
  }
7787
8061
 
7788
- .b-dark .bc-code-language-button {
8062
+ .dark .bc-code-language-button {
7789
8063
  background-color: var(--color-neutral-800);
7790
8064
  border-color: var(--color-neutral-600);
7791
8065
  color: var(--color-neutral-200);
7792
8066
  }
7793
8067
 
7794
- .b-dark .bc-code-language-button:hover:not(:disabled) {
8068
+ .dark .bc-code-language-button:hover:not(:disabled) {
7795
8069
  background-color: var(--color-neutral-700);
7796
8070
  border-color: var(--color-neutral-500);
7797
8071
  }
7798
8072
 
7799
- .b-dark .bc-code-language-dropdown {
8073
+ .dark .bc-code-language-dropdown {
7800
8074
  background-color: var(--color-neutral-800);
7801
8075
  border-color: var(--color-neutral-700);
7802
8076
  }
7803
8077
 
7804
- .b-dark .bc-code-language-option {
8078
+ .dark .bc-code-language-option {
7805
8079
  color: var(--color-neutral-100);
7806
8080
  }
7807
8081
 
7808
- .b-dark .bc-code-language-option:hover {
8082
+ .dark .bc-code-language-option:hover {
7809
8083
  background-color: var(--color-neutral-700);
7810
8084
  }
7811
8085
 
7812
- .b-dark .bc-code-language-option:active {
8086
+ .dark .bc-code-language-option:active {
7813
8087
  background-color: var(--color-neutral-600);
7814
8088
  }
7815
8089
 
7816
8090
  /* Syntax highlighting token colors (dark theme) */
7817
- .b-dark .bc-lexical-code-block .token.comment,
7818
- .b-dark .bc-lexical-code-block .token.prolog,
7819
- .b-dark .bc-lexical-code-block .token.doctype,
7820
- .b-dark .bc-lexical-code-block .token.cdata {
8091
+ .dark .bc-lexical-code-block .token.comment,
8092
+ .dark .bc-lexical-code-block .token.prolog,
8093
+ .dark .bc-lexical-code-block .token.doctype,
8094
+ .dark .bc-lexical-code-block .token.cdata {
7821
8095
  color: #8b949e;
7822
8096
  }
7823
8097
 
7824
- .b-dark .bc-lexical-code-block .token.punctuation {
8098
+ .dark .bc-lexical-code-block .token.punctuation {
7825
8099
  color: #c9d1d9;
7826
8100
  }
7827
8101
 
7828
- .b-dark .bc-lexical-code-block .token.property,
7829
- .b-dark .bc-lexical-code-block .token.tag,
7830
- .b-dark .bc-lexical-code-block .token.boolean,
7831
- .b-dark .bc-lexical-code-block .token.number,
7832
- .b-dark .bc-lexical-code-block .token.constant,
7833
- .b-dark .bc-lexical-code-block .token.symbol,
7834
- .b-dark .bc-lexical-code-block .token.deleted {
8102
+ .dark .bc-lexical-code-block .token.property,
8103
+ .dark .bc-lexical-code-block .token.tag,
8104
+ .dark .bc-lexical-code-block .token.boolean,
8105
+ .dark .bc-lexical-code-block .token.number,
8106
+ .dark .bc-lexical-code-block .token.constant,
8107
+ .dark .bc-lexical-code-block .token.symbol,
8108
+ .dark .bc-lexical-code-block .token.deleted {
7835
8109
  color: #79c0ff;
7836
8110
  }
7837
8111
 
7838
- .b-dark .bc-lexical-code-block .token.selector,
7839
- .b-dark .bc-lexical-code-block .token.attr-name,
7840
- .b-dark .bc-lexical-code-block .token.string,
7841
- .b-dark .bc-lexical-code-block .token.char,
7842
- .b-dark .bc-lexical-code-block .token.builtin,
7843
- .b-dark .bc-lexical-code-block .token.inserted {
8112
+ .dark .bc-lexical-code-block .token.selector,
8113
+ .dark .bc-lexical-code-block .token.attr-name,
8114
+ .dark .bc-lexical-code-block .token.string,
8115
+ .dark .bc-lexical-code-block .token.char,
8116
+ .dark .bc-lexical-code-block .token.builtin,
8117
+ .dark .bc-lexical-code-block .token.inserted {
7844
8118
  color: #a5d6ff;
7845
8119
  }
7846
8120
 
7847
- .b-dark .bc-lexical-code-block .token.operator,
7848
- .b-dark .bc-lexical-code-block .token.entity,
7849
- .b-dark .bc-lexical-code-block .token.url,
7850
- .b-dark .bc-lexical-code-block .language-css .token.string,
7851
- .b-dark .bc-lexical-code-block .style .token.string {
8121
+ .dark .bc-lexical-code-block .token.operator,
8122
+ .dark .bc-lexical-code-block .token.entity,
8123
+ .dark .bc-lexical-code-block .token.url,
8124
+ .dark .bc-lexical-code-block .language-css .token.string,
8125
+ .dark .bc-lexical-code-block .style .token.string {
7852
8126
  color: #ff7b72;
7853
8127
  }
7854
8128
 
7855
- .b-dark .bc-lexical-code-block .token.atrule,
7856
- .b-dark .bc-lexical-code-block .token.attr-value,
7857
- .b-dark .bc-lexical-code-block .token.keyword {
8129
+ .dark .bc-lexical-code-block .token.atrule,
8130
+ .dark .bc-lexical-code-block .token.attr-value,
8131
+ .dark .bc-lexical-code-block .token.keyword {
7858
8132
  color: #ff7b72;
7859
8133
  }
7860
8134
 
7861
- .b-dark .bc-lexical-code-block .token.function,
7862
- .b-dark .bc-lexical-code-block .token.class-name {
8135
+ .dark .bc-lexical-code-block .token.function,
8136
+ .dark .bc-lexical-code-block .token.class-name {
7863
8137
  color: #d2a8ff;
7864
8138
  }
7865
8139
 
7866
- .b-dark .bc-lexical-code-block .token.regex,
7867
- .b-dark .bc-lexical-code-block .token.important,
7868
- .b-dark .bc-lexical-code-block .token.variable {
8140
+ .dark .bc-lexical-code-block .token.regex,
8141
+ .dark .bc-lexical-code-block .token.important,
8142
+ .dark .bc-lexical-code-block .token.variable {
7869
8143
  color: #ffa657;
7870
8144
  }
7871
8145
 
7872
- .b-dark .bc-lexical-code-block .line-number {
8146
+ .dark .bc-lexical-code-block .line-number {
7873
8147
  color: var(--color-neutral-600);
7874
8148
  }
7875
8149
 
@@ -7959,11 +8233,11 @@ a:focus-visible {
7959
8233
  color: var(--link-hover-color);
7960
8234
  }
7961
8235
 
7962
- .b-dark .bc-link {
8236
+ .dark .bc-link {
7963
8237
  color: var(--link-color-dark);
7964
8238
  }
7965
8239
 
7966
- .b-dark .bc-link:hover {
8240
+ .dark .bc-link:hover {
7967
8241
  color: var(--link-hover-color-dark);
7968
8242
  }
7969
8243
 
@@ -8051,7 +8325,7 @@ a:focus-visible {
8051
8325
  }
8052
8326
 
8053
8327
  /* Dark mode styles */
8054
- .b-dark .bc-menu {
8328
+ .dark .bc-menu {
8055
8329
  background-color: var(--bg-surface);
8056
8330
  border-color: var(--border-default);
8057
8331
  }
@@ -8121,16 +8395,16 @@ a:focus-visible {
8121
8395
  }
8122
8396
 
8123
8397
  /* Dark mode menu item styles */
8124
- .b-dark .bc-menu-item:hover:not(.bc-menu-item--disabled) {
8398
+ .dark .bc-menu-item:hover:not(.bc-menu-item--disabled) {
8125
8399
  background-color: var(--interactive-hover);
8126
8400
  }
8127
8401
 
8128
- .b-dark .bc-menu-item--focused {
8402
+ .dark .bc-menu-item--focused {
8129
8403
  background-color: var(--color-primary-900);
8130
8404
  color: var(--color-primary-100);
8131
8405
  }
8132
8406
 
8133
- .b-dark .bc-menu-item:active:not(.bc-menu-item--disabled) {
8407
+ .dark .bc-menu-item:active:not(.bc-menu-item--disabled) {
8134
8408
  background-color: var(--interactive-active);
8135
8409
  }
8136
8410
 
@@ -8175,11 +8449,11 @@ a:focus-visible {
8175
8449
  }
8176
8450
 
8177
8451
  /* Dark mode separator styles */
8178
- .b-dark .bc-menu-separator {
8452
+ .dark .bc-menu-separator {
8179
8453
  border-color: var(--border-divider);
8180
8454
  }
8181
8455
 
8182
- .b-dark .bc-menu-separator__label {
8456
+ .dark .bc-menu-separator__label {
8183
8457
  background-color: var(--bg-surface);
8184
8458
  }
8185
8459
 
@@ -8302,7 +8576,7 @@ a:focus-visible {
8302
8576
  background-color: var(--color-base-200);
8303
8577
  }
8304
8578
 
8305
- .b-dark .bc-menu-item:active {
8579
+ .dark .bc-menu-item:active {
8306
8580
  background-color: var(--interactive-active);
8307
8581
  }
8308
8582
  }
@@ -8755,41 +9029,41 @@ a:focus-visible {
8755
9029
  }
8756
9030
 
8757
9031
  /* Dark mode styles */
8758
- .b-dark .bc-modal {
9032
+ .dark .bc-modal {
8759
9033
  background-color: var(--bg-surface);
8760
9034
  border: 1px solid var(--border-default);
8761
9035
  color: var(--text-normal);
8762
9036
  }
8763
9037
 
8764
- .b-dark .bc-modal__header {
9038
+ .dark .bc-modal__header {
8765
9039
  border-bottom: 1px solid var(--border-divider);
8766
9040
  background-color: var(--bg-elevated);
8767
9041
  }
8768
9042
 
8769
- .b-dark .bc-modal__body {
9043
+ .dark .bc-modal__body {
8770
9044
  color: var(--text-normal);
8771
9045
  background-color: var(--bg-surface);
8772
9046
  }
8773
9047
 
8774
- .b-dark .bc-modal__footer {
9048
+ .dark .bc-modal__footer {
8775
9049
  border-top: 1px solid var(--border-divider);
8776
9050
  background-color: var(--bg-elevated);
8777
9051
  }
8778
9052
 
8779
- .b-dark .bc-modal__confirm-body {
9053
+ .dark .bc-modal__confirm-body {
8780
9054
  color: var(--color-base-400);
8781
9055
  }
8782
9056
 
8783
- .b-dark .bc-modal__confirm-consequences {
9057
+ .dark .bc-modal__confirm-consequences {
8784
9058
  background: var(--color-base-800);
8785
9059
  color: var(--color-base-400);
8786
9060
  }
8787
9061
 
8788
- .b-dark .bc-modal__confirm-consequences li::before {
9062
+ .dark .bc-modal__confirm-consequences li::before {
8789
9063
  color: var(--color-base-600);
8790
9064
  }
8791
9065
 
8792
- .b-dark .bc-modal--confirm .bc-modal__footer {
9066
+ .dark .bc-modal--confirm .bc-modal__footer {
8793
9067
  border-top: 1px solid var(--color-base-700);
8794
9068
  background: var(--color-base-800);
8795
9069
  }
@@ -8873,7 +9147,7 @@ a:focus-visible {
8873
9147
  color: var(--color-gray-700);
8874
9148
  }
8875
9149
 
8876
- .b-dark .bc-modal__title {
9150
+ .dark .bc-modal__title {
8877
9151
  color: var(--color-gray-200);
8878
9152
  }
8879
9153
 
@@ -9074,6 +9348,15 @@ a:focus-visible {
9074
9348
  transform: none;
9075
9349
  }
9076
9350
 
9351
+ /* Dark mode */
9352
+ .dark .bc-number-input-steppers-button {
9353
+ outline-color: var(--color-base-600);
9354
+ }
9355
+
9356
+ .dark .bc-number-input-steppers-button:hover {
9357
+ background-color: var(--color-base-700);
9358
+ }
9359
+
9077
9360
  /* export type OverlayEffect = 'transparent' | 'opaque'
9078
9361
  export type OverlayMode = 'capturing' | 'non-capturing' */
9079
9362
 
@@ -9114,12 +9397,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9114
9397
  }
9115
9398
 
9116
9399
  /* Dark mode styles */
9117
- .b-dark .bc-overlay--effect-transparent {
9400
+ .dark .bc-overlay--effect-transparent {
9118
9401
  background-color: color-mix(in srgb, var(--color-white) 2%, transparent);
9119
9402
  }
9120
9403
 
9121
- .b-dark .bc-overlay--effect-opaque[data-status='opened'],
9122
- .b-dark .bc-overlay--effect-opaque[data-status='opening'] {
9404
+ .dark .bc-overlay--effect-opaque[data-status='opened'],
9405
+ .dark .bc-overlay--effect-opaque[data-status='opening'] {
9123
9406
  background-color: color-mix(in srgb, var(--color-black) 80%, transparent);
9124
9407
  backdrop-filter: blur(4px);
9125
9408
  }
@@ -9136,7 +9419,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9136
9419
  }
9137
9420
 
9138
9421
  /* Dark mode */
9139
- .b-dark .bc-popover {
9422
+ .dark .bc-popover {
9140
9423
  background: var(--color-base-800);
9141
9424
  border-color: var(--color-base-700);
9142
9425
  color: var(--color-base-200);
@@ -9168,6 +9451,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9168
9451
  color: var(--color-gray-900);
9169
9452
  }
9170
9453
 
9454
+ .dark .bc-lightbox__close {
9455
+ background-color: color-mix(in srgb, var(--color-gray-800) 80%, transparent);
9456
+ color: var(--color-gray-100);
9457
+ }
9458
+
9171
9459
  .bc-lightbox__viewport {
9172
9460
  position: absolute;
9173
9461
  inset: 0;
@@ -9275,7 +9563,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9275
9563
  overflow: hidden;
9276
9564
  }
9277
9565
 
9278
- .b-dark .bc-panel {
9566
+ .dark .bc-panel {
9279
9567
  background-color: var(--panel-bg-dark);
9280
9568
  color: var(--panel-text-dark);
9281
9569
  }
@@ -9447,31 +9735,31 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9447
9735
  }
9448
9736
 
9449
9737
  /* Dark Mode Support */
9450
- .b-dark .bc-pagination__item {
9738
+ .dark .bc-pagination__item {
9451
9739
  color: var(--color-base-300);
9452
9740
  }
9453
9741
 
9454
- .b-dark .bc-pagination__item:hover:not(:disabled) {
9742
+ .dark .bc-pagination__item:hover:not(:disabled) {
9455
9743
  background-color: var(--color-base-700);
9456
9744
  color: var(--color-base-100);
9457
9745
  }
9458
9746
 
9459
- .b-dark .bc-pagination__item--active {
9747
+ .dark .bc-pagination__item--active {
9460
9748
  background-color: var(--color-primary-600);
9461
9749
  color: var(--color-white);
9462
9750
  }
9463
9751
 
9464
- .b-dark .bc-pagination__item--active:hover {
9752
+ .dark .bc-pagination__item--active:hover {
9465
9753
  background-color: var(--color-primary-600);
9466
9754
  color: var(--color-white);
9467
9755
  }
9468
9756
 
9469
- .b-dark .bc-pagination__item:disabled:hover {
9757
+ .dark .bc-pagination__item:disabled:hover {
9470
9758
  background: transparent;
9471
9759
  color: var(--color-base-300);
9472
9760
  }
9473
9761
 
9474
- .b-dark .bc-pagination__dots {
9762
+ .dark .bc-pagination__dots {
9475
9763
  color: var(--color-base-600);
9476
9764
  }
9477
9765
 
@@ -9514,7 +9802,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9514
9802
  overflow: hidden;
9515
9803
  }
9516
9804
 
9517
- .b-dark .bc-password-strength__bar {
9805
+ .dark .bc-password-strength__bar {
9518
9806
  background-color: var(--color-gray-700);
9519
9807
  }
9520
9808
 
@@ -9570,19 +9858,19 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9570
9858
  color: var(--color-success-600);
9571
9859
  }
9572
9860
 
9573
- .b-dark .bc-password-strength--weak .bc-password-strength__label {
9861
+ .dark .bc-password-strength--weak .bc-password-strength__label {
9574
9862
  color: var(--color-danger-400);
9575
9863
  }
9576
9864
 
9577
- .b-dark .bc-password-strength--fair .bc-password-strength__label {
9865
+ .dark .bc-password-strength--fair .bc-password-strength__label {
9578
9866
  color: var(--color-warning-400);
9579
9867
  }
9580
9868
 
9581
- .b-dark .bc-password-strength--good .bc-password-strength__label {
9869
+ .dark .bc-password-strength--good .bc-password-strength__label {
9582
9870
  color: var(--color-info-400);
9583
9871
  }
9584
9872
 
9585
- .b-dark .bc-password-strength--strong .bc-password-strength__label {
9873
+ .dark .bc-password-strength--strong .bc-password-strength__label {
9586
9874
  color: var(--color-success-400);
9587
9875
  }
9588
9876
 
@@ -9608,7 +9896,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9608
9896
  color: var(--color-success-600);
9609
9897
  }
9610
9898
 
9611
- .b-dark .bc-password-strength__requirement--met {
9899
+ .dark .bc-password-strength__requirement--met {
9612
9900
  color: var(--color-success-400);
9613
9901
  }
9614
9902
 
@@ -9632,7 +9920,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9632
9920
  overflow: hidden;
9633
9921
  }
9634
9922
 
9635
- .b-dark .bc-password-strength-bar {
9923
+ .dark .bc-password-strength-bar {
9636
9924
  background-color: var(--color-gray-700);
9637
9925
  }
9638
9926
 
@@ -9683,19 +9971,19 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9683
9971
  color: var(--color-success-600);
9684
9972
  }
9685
9973
 
9686
- .b-dark .bc-password-strength-text--weak {
9974
+ .dark .bc-password-strength-text--weak {
9687
9975
  color: var(--color-danger-400);
9688
9976
  }
9689
9977
 
9690
- .b-dark .bc-password-strength-text--fair {
9978
+ .dark .bc-password-strength-text--fair {
9691
9979
  color: var(--color-warning-400);
9692
9980
  }
9693
9981
 
9694
- .b-dark .bc-password-strength-text--good {
9982
+ .dark .bc-password-strength-text--good {
9695
9983
  color: var(--color-info-400);
9696
9984
  }
9697
9985
 
9698
- .b-dark .bc-password-strength-text--strong {
9986
+ .dark .bc-password-strength-text--strong {
9699
9987
  color: var(--color-success-400);
9700
9988
  }
9701
9989
 
@@ -9706,8 +9994,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9706
9994
  border: 1px solid var(--border-default);
9707
9995
  }
9708
9996
 
9709
- .b-dark .bc-password-strength__bar,
9710
- .b-dark .bc-password-strength-bar {
9997
+ .dark .bc-password-strength__bar,
9998
+ .dark .bc-password-strength-bar {
9711
9999
  border-color: var(--border-default);
9712
10000
  }
9713
10001
  }
@@ -9885,11 +10173,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9885
10173
  }
9886
10174
 
9887
10175
  /* Dark mode styles */
9888
- .b-dark .bc-progress-bar__track {
10176
+ .dark .bc-progress-bar__track {
9889
10177
  background-color: var(--progress-track-dark);
9890
10178
  }
9891
10179
 
9892
- .b-dark .bc-progress-bar__fill {
10180
+ .dark .bc-progress-bar__fill {
9893
10181
  background-color: var(--progress-fill-dark);
9894
10182
  }
9895
10183
 
@@ -10029,20 +10317,20 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10029
10317
  }
10030
10318
 
10031
10319
  /* Dark mode styles */
10032
- .b-dark .bc-scrollable-panel__body::-webkit-scrollbar-track {
10320
+ .dark .bc-scrollable-panel__body::-webkit-scrollbar-track {
10033
10321
  background: var(--bg-subtle);
10034
10322
  }
10035
10323
 
10036
- .b-dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb {
10324
+ .dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb {
10037
10325
  background: var(--bg-raised);
10038
10326
  border-radius: var(--radius-sm);
10039
10327
  }
10040
10328
 
10041
- .b-dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
10329
+ .dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
10042
10330
  background: var(--bg-overlay);
10043
10331
  }
10044
10332
 
10045
- .b-dark .bc-scrollable-panel__body {
10333
+ .dark .bc-scrollable-panel__body {
10046
10334
  scrollbar-color: var(--bg-raised) var(--bg-subtle);
10047
10335
  }
10048
10336
 
@@ -10175,12 +10463,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10175
10463
  }
10176
10464
 
10177
10465
  /* Dark mode styles */
10178
- .b-dark .bc-segmented-input {
10466
+ .dark .bc-segmented-input {
10179
10467
  background-color: var(--bg-subtle);
10180
10468
  border: 1px solid var(--border-default);
10181
10469
  }
10182
10470
 
10183
- .b-dark .bc-segmented-input__indicator {
10471
+ .dark .bc-segmented-input__indicator {
10184
10472
  background-color: var(--si-indicator-bg-dark, var(--bg-elevated));
10185
10473
  box-shadow: var(
10186
10474
  --shadow-segmented-control-indicator-dark,
@@ -10189,49 +10477,49 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10189
10477
  );
10190
10478
  }
10191
10479
 
10192
- .b-dark .bc-segmented-input__segment {
10480
+ .dark .bc-segmented-input__segment {
10193
10481
  transition: all
10194
10482
  var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
10195
10483
  var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
10196
10484
  border-radius: var(--radius-full);
10197
10485
  }
10198
10486
 
10199
- .b-dark .bc-segmented-input--squared .bc-segmented-input__segment {
10487
+ .dark .bc-segmented-input--squared .bc-segmented-input__segment {
10200
10488
  border-radius: var(--radius-control-sm, var(--radius-sm));
10201
10489
  }
10202
10490
 
10203
- .b-dark .bc-segmented-input__segment:hover {
10491
+ .dark .bc-segmented-input__segment:hover {
10204
10492
  color: var(--text-normal);
10205
10493
  background-color: var(--interactive-hover);
10206
10494
  }
10207
10495
 
10208
- .b-dark .bc-segmented-input__segment--active,
10209
- .b-dark .bc-segmented-input__segment--active:hover {
10496
+ .dark .bc-segmented-input__segment--active,
10497
+ .dark .bc-segmented-input__segment--active:hover {
10210
10498
  color: var(--si-active-text-dark, var(--text-normal));
10211
10499
  background: transparent;
10212
10500
  }
10213
10501
 
10214
- .b-dark .bc-segmented-input__segment--inactive:hover {
10502
+ .dark .bc-segmented-input__segment--inactive:hover {
10215
10503
  color: var(--text-normal);
10216
10504
  }
10217
10505
 
10218
10506
  /* Disabled state (dark) */
10219
- .b-dark .bc-segmented-input--disabled {
10507
+ .dark .bc-segmented-input--disabled {
10220
10508
  background-color: var(--bg-background);
10221
10509
  border: 1px solid var(--border-divider);
10222
10510
  opacity: 0.5;
10223
10511
  }
10224
10512
 
10225
- .b-dark .bc-segmented-input--disabled .bc-segmented-input__indicator {
10513
+ .dark .bc-segmented-input--disabled .bc-segmented-input__indicator {
10226
10514
  background-color: var(--bg-subtle);
10227
10515
  box-shadow: var(--shadow-none, none);
10228
10516
  }
10229
10517
 
10230
- .b-dark .bc-segmented-input--disabled .bc-segmented-input__segment {
10518
+ .dark .bc-segmented-input--disabled .bc-segmented-input__segment {
10231
10519
  cursor: not-allowed;
10232
10520
  }
10233
10521
 
10234
- .b-dark .bc-segmented-input--disabled .bc-segmented-input__segment:hover {
10522
+ .dark .bc-segmented-input--disabled .bc-segmented-input__segment:hover {
10235
10523
  background-color: transparent;
10236
10524
  }
10237
10525
 
@@ -10349,7 +10637,7 @@ span.bc-sidebar-link {
10349
10637
  }
10350
10638
 
10351
10639
  /* Dark mode styles */
10352
- .b-dark span.bc-sidebar-link {
10640
+ .dark span.bc-sidebar-link {
10353
10641
  color: var(--color-primary-200);
10354
10642
  }
10355
10643
 
@@ -10386,7 +10674,7 @@ span.bc-sidebar-link {
10386
10674
  }
10387
10675
 
10388
10676
  /* Dark background mode in dark theme - inverted back to light colors */
10389
- .b-dark .bc-sidebar--dark-bg span.bc-sidebar-link {
10677
+ .dark .bc-sidebar--dark-bg span.bc-sidebar-link {
10390
10678
  color: var(--color-primary-700);
10391
10679
  }
10392
10680
 
@@ -10480,28 +10768,28 @@ span.bc-sidebar-link {
10480
10768
  }
10481
10769
 
10482
10770
  /* Dark mode styles */
10483
- .b-dark .bc-sink {
10771
+ .dark .bc-sink {
10484
10772
  background-color: var(--bg-background);
10485
10773
  border: 1px solid var(--border-default);
10486
10774
  box-shadow: var(--shadow-sink-dark, inset 0 2px 4px var(--shadow-color-dark));
10487
10775
  color: var(--text-normal);
10488
10776
  }
10489
10777
 
10490
- .b-dark .bc-sink--deep {
10778
+ .dark .bc-sink--deep {
10491
10779
  box-shadow: var(
10492
10780
  --shadow-sink-dark-deep,
10493
10781
  inset 0 4px 8px var(--shadow-color-dark)
10494
10782
  );
10495
10783
  }
10496
10784
 
10497
- .b-dark .bc-sink--shallow {
10785
+ .dark .bc-sink--shallow {
10498
10786
  box-shadow: var(
10499
10787
  --shadow-sink-dark-shallow,
10500
10788
  inset 0 1px 2px var(--shadow-color-dark)
10501
10789
  );
10502
10790
  }
10503
10791
 
10504
- .b-dark .bc-sink--flat {
10792
+ .dark .bc-sink--flat {
10505
10793
  box-shadow: var(--shadow-sink-dark-flat, none);
10506
10794
  border: 1px solid var(--border-divider);
10507
10795
  background-color: var(--bg-subtle);
@@ -10577,7 +10865,7 @@ span.bc-sidebar-link {
10577
10865
  }
10578
10866
 
10579
10867
  /* Dark mode styles */
10580
- .b-dark .bc-skeleton {
10868
+ .dark .bc-skeleton {
10581
10869
  --skeleton-bg: oklch(0.25 0 0);
10582
10870
  --skeleton-shimmer: oklch(0.3 0 0);
10583
10871
  }
@@ -10730,22 +11018,22 @@ span.bc-sidebar-link {
10730
11018
  }
10731
11019
 
10732
11020
  /* Dark mode styles */
10733
- .b-dark .bc-tag {
11021
+ .dark .bc-tag {
10734
11022
  background-color: var(--tag-bg-dark);
10735
11023
  color: var(--tag-text-dark);
10736
11024
  border-color: var(--tag-border-dark);
10737
11025
  }
10738
11026
 
10739
- .b-dark .bc-tag:hover {
11027
+ .dark .bc-tag:hover {
10740
11028
  background-color: var(--tag-bg-hover-dark);
10741
11029
  color: var(--tag-text-hover-dark);
10742
11030
  }
10743
11031
 
10744
- .b-dark .bc-tag__close {
11032
+ .dark .bc-tag__close {
10745
11033
  color: var(--tag-text-dark);
10746
11034
  }
10747
11035
 
10748
- .b-dark .bc-tag__close:hover:not(:disabled) {
11036
+ .dark .bc-tag__close:hover:not(:disabled) {
10749
11037
  color: var(--tag-text-dark);
10750
11038
  border-color: color-mix(in srgb, var(--tag-text-dark) 30%, transparent);
10751
11039
  }
@@ -10813,11 +11101,9 @@ span.bc-sidebar-link {
10813
11101
  display: grid;
10814
11102
  grid-template-areas: 'stack';
10815
11103
  border-radius: var(--radius-full);
10816
- box-shadow: var(
10817
- --shadow-switch-track,
10818
- inset 0 0 calc(var(--spacing-base))
10819
- color-mix(in srgb, var(--color-black) 20%, transparent)
10820
- );
11104
+ box-shadow:
11105
+ inset 0 1px 3px 0 color-mix(in srgb, var(--color-black) 10%, transparent),
11106
+ inset 0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent);
10821
11107
  transition: background-color var(--motion-transition-fast)
10822
11108
  var(--motion-easing-standard);
10823
11109
  cursor: pointer;
@@ -10895,9 +11181,9 @@ span.bc-sidebar-link {
10895
11181
  /* Switch thumb/handle */
10896
11182
  .bc-switch__thumb {
10897
11183
  grid-area: stack;
11184
+ position: relative;
10898
11185
  width: calc(var(--spacing-base) * 4); /* 16px equivalent */
10899
11186
  height: calc(var(--spacing-base) * 4);
10900
- /* margin-top: calc(var(--spacing-base) / 2); */
10901
11187
  border-radius: var(--radius-full);
10902
11188
  background-color: var(--color-white);
10903
11189
  box-shadow: var(
@@ -10906,16 +11192,26 @@ span.bc-sidebar-link {
10906
11192
  0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent)
10907
11193
  );
10908
11194
  z-index: 1;
10909
- transition: transform var(--motion-transition-fast)
10910
- var(--motion-easing-standard);
11195
+ inset-inline-start: 0;
11196
+ transition: inset-inline-start var(--motion-duration-fast, 120ms)
11197
+ cubic-bezier(0.2, 0, 0, 1);
10911
11198
  pointer-events: none;
10912
11199
  }
10913
11200
 
11201
+ /* Thumb position when on — uses inset-inline-start so RTL is handled
11202
+ automatically via the logical property. calc(100% - thumbWidth) moves
11203
+ the thumb to the far end of the grid area regardless of track width. */
11204
+ .bc-switch__thumb--on {
11205
+ inset-inline-start: calc(100% - var(--spacing-base) * 4);
11206
+ }
11207
+
10914
11208
  /* Size variants for track and thumb */
10915
11209
  .bc-switch--xs .bc-switch__thumb {
10916
11210
  width: calc(var(--spacing-base) * 3); /* 12px equivalent */
10917
11211
  height: calc(var(--spacing-base) * 3);
10918
- /* margin-top: calc(var(--spacing-base) / 1); */
11212
+ }
11213
+ .bc-switch--xs .bc-switch__thumb--on {
11214
+ inset-inline-start: calc(100% - var(--spacing-base) * 3);
10919
11215
  }
10920
11216
  .bc-switch--xs .bc-switch__track-label--off {
10921
11217
  padding-inline-end: var(--spacing-base);
@@ -10932,7 +11228,9 @@ span.bc-sidebar-link {
10932
11228
  .bc-switch--sm .bc-switch__thumb {
10933
11229
  width: calc(var(--spacing-base) * 3.5); /* 14px equivalent */
10934
11230
  height: calc(var(--spacing-base) * 3.5);
10935
- /* margin-top: calc(var(--spacing-base) / 1); */
11231
+ }
11232
+ .bc-switch--sm .bc-switch__thumb--on {
11233
+ inset-inline-start: calc(100% - var(--spacing-base) * 3.5);
10936
11234
  }
10937
11235
  .bc-switch--sm .bc-switch__track-label--off {
10938
11236
  padding-inline-end: var(--spacing-base);
@@ -10949,7 +11247,9 @@ span.bc-sidebar-link {
10949
11247
  .bc-switch--md .bc-switch__thumb {
10950
11248
  width: calc(var(--spacing-base) * 4); /* 20px equivalent */
10951
11249
  height: calc(var(--spacing-base) * 4);
10952
- /* margin-top: calc(var(--spacing-base) / 1); */
11250
+ }
11251
+ .bc-switch--md .bc-switch__thumb--on {
11252
+ inset-inline-start: calc(100% - var(--spacing-base) * 4);
10953
11253
  }
10954
11254
  .bc-switch--md .bc-switch__track-label--off {
10955
11255
  padding-inline-end: var(--spacing-base);
@@ -10966,7 +11266,9 @@ span.bc-sidebar-link {
10966
11266
  .bc-switch--lg .bc-switch__thumb {
10967
11267
  width: calc(var(--spacing-base) * 5); /* 20px equivalent */
10968
11268
  height: calc(var(--spacing-base) * 5);
10969
- /* margin-top: calc(var(--spacing-base) / 1); */
11269
+ }
11270
+ .bc-switch--lg .bc-switch__thumb--on {
11271
+ inset-inline-start: calc(100% - var(--spacing-base) * 5);
10970
11272
  }
10971
11273
  .bc-switch--lg .bc-switch__track-label--off {
10972
11274
  padding-inline-end: var(--spacing-base);
@@ -10983,7 +11285,9 @@ span.bc-sidebar-link {
10983
11285
  .bc-switch--xl .bc-switch__thumb {
10984
11286
  width: calc(var(--spacing-base) * 6); /* 24px equivalent */
10985
11287
  height: calc(var(--spacing-base) * 6);
10986
- /* margin-top: calc(var(--spacing-base) / 1); */
11288
+ }
11289
+ .bc-switch--xl .bc-switch__thumb--on {
11290
+ inset-inline-start: calc(100% - var(--spacing-base) * 6);
10987
11291
  }
10988
11292
  .bc-switch--xl .bc-switch__track-label--off {
10989
11293
  padding-inline-end: var(--spacing-base);
@@ -11028,25 +11332,25 @@ span.bc-sidebar-link {
11028
11332
  }
11029
11333
 
11030
11334
  /* Dark mode styles */
11031
- .b-dark .bc-switch__label {
11335
+ .dark .bc-switch__label {
11032
11336
  color: var(--text-normal);
11033
11337
  }
11034
11338
 
11035
- .b-dark .bc-switch__track--off {
11339
+ .dark .bc-switch__track--off {
11036
11340
  background-color: var(--bg-subtle);
11037
11341
  border: 1px solid var(--border-default);
11038
11342
  }
11039
11343
 
11040
- .b-dark .bc-switch__track--on {
11344
+ .dark .bc-switch__track--on {
11041
11345
  background-color: var(--switch-track-on-bg-dark, var(--color-primary-600));
11042
11346
  border: 1px solid var(--switch-track-on-border-dark, var(--color-primary-500));
11043
11347
  }
11044
11348
 
11045
- .b-dark .bc-switch__track-label--on {
11349
+ .dark .bc-switch__track-label--on {
11046
11350
  color: var(--switch-track-on-label-dark, var(--text-normal));
11047
11351
  }
11048
11352
 
11049
- .b-dark .bc-switch__thumb {
11353
+ .dark .bc-switch__thumb {
11050
11354
  background-color: var(--text-normal);
11051
11355
  box-shadow: var(--shadow-switch-thumb-dark, var(--shadow-md));
11052
11356
  }
@@ -11245,7 +11549,7 @@ span.bc-sidebar-link {
11245
11549
  }
11246
11550
 
11247
11551
  /* Dark mode styles */
11248
- .b-dark .bc-table-container {
11552
+ .dark .bc-table-container {
11249
11553
  --table-bg: var(--bg-background);
11250
11554
  --table-stripe-bg: var(--bg-surface);
11251
11555
  }
@@ -11469,30 +11773,30 @@ span.bc-sidebar-link {
11469
11773
  }
11470
11774
 
11471
11775
  /* Dark mode support */
11472
- .b-dark .bc-tabs__list {
11776
+ .dark .bc-tabs__list {
11473
11777
  background-color: var(--color-base-800);
11474
11778
  border-color: var(--color-base-700);
11475
11779
  }
11476
11780
 
11477
- .b-dark .bc-tab {
11781
+ .dark .bc-tab {
11478
11782
  color: var(--color-base-300);
11479
11783
  }
11480
11784
 
11481
- .b-dark .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
11785
+ .dark .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
11482
11786
  color: var(--color-base-100);
11483
11787
  background-color: var(--color-base-700);
11484
11788
  }
11485
11789
 
11486
- .b-dark .bc-tab--active {
11790
+ .dark .bc-tab--active {
11487
11791
  color: var(--color-primary-400);
11488
11792
  background-color: var(--color-base-900);
11489
11793
  }
11490
11794
 
11491
- .b-dark .bc-tab--disabled {
11795
+ .dark .bc-tab--disabled {
11492
11796
  color: var(--color-base-600);
11493
11797
  }
11494
11798
 
11495
- .b-dark .bc-tabs__panel {
11799
+ .dark .bc-tabs__panel {
11496
11800
  background-color: var(--color-base-900);
11497
11801
  }
11498
11802
 
@@ -11610,29 +11914,29 @@ span.bc-sidebar-link {
11610
11914
  }
11611
11915
 
11612
11916
  /* Dark mode adjustments for variants */
11613
- .b-dark .bc-tabs--variant-text .bc-tabs__list {
11917
+ .dark .bc-tabs--variant-text .bc-tabs__list {
11614
11918
  background-color: transparent;
11615
11919
  border-bottom: none;
11616
11920
  }
11617
- .b-dark .bc-tabs--variant-text .bc-tab {
11921
+ .dark .bc-tabs--variant-text .bc-tab {
11618
11922
  color: var(--color-primary-300);
11619
11923
  }
11620
- .b-dark .bc-tabs--variant-text .bc-tab--active {
11924
+ .dark .bc-tabs--variant-text .bc-tab--active {
11621
11925
  color: var(--color-primary-200);
11622
11926
  }
11623
11927
 
11624
- .b-dark .bc-tabs--variant-filled .bc-tab {
11928
+ .dark .bc-tabs--variant-filled .bc-tab {
11625
11929
  background-color: var(--tabs-filled-inactive-bg-dark);
11626
11930
  color: var(--tabs-filled-inactive-text-dark);
11627
11931
  }
11628
- .b-dark .bc-tabs--variant-filled .bc-tab--active {
11932
+ .dark .bc-tabs--variant-filled .bc-tab--active {
11629
11933
  background-color: var(--tabs-filled-active-bg-dark, var(--color-white));
11630
11934
  color: var(--tabs-filled-active-text-dark);
11631
11935
  }
11632
- .b-dark
11936
+ .dark
11633
11937
  .bc-tabs--variant-filled
11634
11938
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active),
11635
- .b-dark
11939
+ .dark
11636
11940
  .bc-tabs--variant-filled
11637
11941
  .bc-tab:focus-visible:not(.bc-tab--disabled):not(.bc-tab--active) {
11638
11942
  background-color: var(
@@ -11641,11 +11945,11 @@ span.bc-sidebar-link {
11641
11945
  );
11642
11946
  }
11643
11947
 
11644
- .b-dark .bc-tabs--variant-outline .bc-tab {
11948
+ .dark .bc-tabs--variant-outline .bc-tab {
11645
11949
  background-color: var(--color-base-800);
11646
11950
  border-color: var(--color-base-600);
11647
11951
  }
11648
- .b-dark .bc-tabs--variant-outline .bc-tab--active {
11952
+ .dark .bc-tabs--variant-outline .bc-tab--active {
11649
11953
  background-color: var(--color-base-900);
11650
11954
  border-color: var(--color-primary-600);
11651
11955
  border-bottom-color: var(--color-base-900);
@@ -11757,46 +12061,46 @@ span.bc-sidebar-link {
11757
12061
  }
11758
12062
 
11759
12063
  /* Dark mode adjustments for underline variant */
11760
- .b-dark .bc-tabs--variant-underline .bc-tabs__list {
12064
+ .dark .bc-tabs--variant-underline .bc-tabs__list {
11761
12065
  background-color: transparent;
11762
12066
  border-bottom-color: var(--color-base-700);
11763
12067
  }
11764
12068
 
11765
- .b-dark .bc-tabs--variant-underline .bc-tab {
12069
+ .dark .bc-tabs--variant-underline .bc-tab {
11766
12070
  color: var(--color-base-500);
11767
12071
  }
11768
12072
 
11769
- .b-dark
12073
+ .dark
11770
12074
  .bc-tabs--variant-underline
11771
12075
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
11772
12076
  color: var(--color-base-300);
11773
12077
  }
11774
12078
 
11775
- .b-dark .bc-tabs--variant-underline .bc-tab--active {
12079
+ .dark .bc-tabs--variant-underline .bc-tab--active {
11776
12080
  color: var(--color-primary-400);
11777
12081
  }
11778
12082
 
11779
- .b-dark .bc-tabs--variant-underline .bc-tab--active::after {
12083
+ .dark .bc-tabs--variant-underline .bc-tab--active::after {
11780
12084
  background-color: var(--color-primary-400);
11781
12085
  }
11782
12086
 
11783
12087
  /* Dark mode adjustments for pill variant */
11784
- .b-dark .bc-tabs--variant-pill .bc-tabs__list {
12088
+ .dark .bc-tabs--variant-pill .bc-tabs__list {
11785
12089
  background-color: var(--color-base-800);
11786
12090
  }
11787
12091
 
11788
- .b-dark .bc-tabs--variant-pill .bc-tab {
12092
+ .dark .bc-tabs--variant-pill .bc-tab {
11789
12093
  color: var(--color-base-500);
11790
12094
  }
11791
12095
 
11792
- .b-dark
12096
+ .dark
11793
12097
  .bc-tabs--variant-pill
11794
12098
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
11795
12099
  color: var(--color-base-300);
11796
12100
  background-color: var(--color-base-700);
11797
12101
  }
11798
12102
 
11799
- .b-dark .bc-tabs--variant-pill .bc-tab--active {
12103
+ .dark .bc-tabs--variant-pill .bc-tab--active {
11800
12104
  background-color: var(--color-base-900);
11801
12105
  color: var(--color-base-200);
11802
12106
  box-shadow: var(--shadow-sm);
@@ -11923,21 +12227,21 @@ span.bc-sidebar-link {
11923
12227
  }
11924
12228
 
11925
12229
  /* Dark mode */
11926
- .b-dark .bc-tag-input {
12230
+ .dark .bc-tag-input {
11927
12231
  background: var(--color-base-800);
11928
12232
  border-color: var(--color-base-600);
11929
12233
  }
11930
12234
 
11931
- .b-dark .bc-tag-input__tag {
12235
+ .dark .bc-tag-input__tag {
11932
12236
  background: var(--color-base-700);
11933
12237
  color: var(--color-base-200);
11934
12238
  }
11935
12239
 
11936
- .b-dark .bc-tag-input__tag-remove {
12240
+ .dark .bc-tag-input__tag-remove {
11937
12241
  color: var(--color-base-400);
11938
12242
  }
11939
12243
 
11940
- .b-dark .bc-tag-input__input {
12244
+ .dark .bc-tag-input__input {
11941
12245
  color: var(--color-base-100);
11942
12246
  }
11943
12247
 
@@ -12023,7 +12327,7 @@ span.bc-sidebar-link {
12023
12327
  }
12024
12328
 
12025
12329
  /* Dark theme adjustments */
12026
- .b-dark .bc-tooltip {
12330
+ .dark .bc-tooltip {
12027
12331
  background-color: var(--bg-elevated);
12028
12332
  color: var(--text-normal);
12029
12333
  border: 1px solid var(--border-default);
@@ -12034,7 +12338,7 @@ span.bc-sidebar-link {
12034
12338
  );
12035
12339
  }
12036
12340
 
12037
- .b-dark .bc-tooltip__arrow svg path {
12341
+ .dark .bc-tooltip__arrow svg path {
12038
12342
  fill: var(--bg-elevated);
12039
12343
  stroke: var(--border-default);
12040
12344
  stroke-width: 1;
@@ -12046,7 +12350,7 @@ span.bc-sidebar-link {
12046
12350
  border: 1px solid var(--color-neutral-600);
12047
12351
  }
12048
12352
 
12049
- .b-dark .bc-tooltip {
12353
+ .dark .bc-tooltip {
12050
12354
  border: 1px solid var(--color-neutral-400);
12051
12355
  }
12052
12356
  }
@@ -12070,7 +12374,7 @@ span.bc-sidebar-link {
12070
12374
  width: 100%;
12071
12375
  }
12072
12376
 
12073
- .b-dark .bc-toolbar {
12377
+ .dark .bc-toolbar {
12074
12378
  background-color: var(--color-neutral-800);
12075
12379
  border-color: var(--color-neutral-700);
12076
12380
  }
@@ -12088,7 +12392,7 @@ span.bc-sidebar-link {
12088
12392
  margin: 0 var(--spacing-xs);
12089
12393
  }
12090
12394
 
12091
- .b-dark .bc-toolbar__divider {
12395
+ .dark .bc-toolbar__divider {
12092
12396
  background-color: var(--color-neutral-600);
12093
12397
  }
12094
12398
 
@@ -12218,29 +12522,27 @@ span.bc-sidebar-link {
12218
12522
  }
12219
12523
 
12220
12524
  /* Dark mode */
12221
- .b-dark .bc-toolbar__group > .bc-toolbar__button.bc-button {
12525
+ .dark .bc-toolbar__group > .bc-toolbar__button.bc-button {
12222
12526
  color: var(--color-base-300);
12223
12527
  }
12224
12528
 
12225
- .b-dark
12226
- .bc-toolbar__group
12227
- > .bc-toolbar__button.bc-button:hover:not(:disabled) {
12529
+ .dark .bc-toolbar__group > .bc-toolbar__button.bc-button:hover:not(:disabled) {
12228
12530
  background-color: var(--color-base-700);
12229
12531
  color: var(--color-base-100);
12230
12532
  }
12231
12533
 
12232
- .b-dark .bc-toolbar__group > .bc-toolbar__button.bc-button[aria-pressed='true'],
12233
- .b-dark
12534
+ .dark .bc-toolbar__group > .bc-toolbar__button.bc-button[aria-pressed='true'],
12535
+ .dark
12234
12536
  .bc-toolbar__group
12235
12537
  > .bc-toolbar__button.bc-button.bc-toolbar__button--active {
12236
12538
  background-color: var(--color-primary-900);
12237
12539
  color: var(--color-primary-300);
12238
12540
  }
12239
12541
 
12240
- .b-dark
12542
+ .dark
12241
12543
  .bc-toolbar__group
12242
12544
  > .bc-toolbar__button.bc-button[aria-pressed='true']:hover:not(:disabled),
12243
- .b-dark
12545
+ .dark
12244
12546
  .bc-toolbar__group
12245
12547
  > .bc-toolbar__button.bc-button.bc-toolbar__button--active:hover:not(
12246
12548
  :disabled
@@ -12296,29 +12598,26 @@ span.bc-sidebar-link {
12296
12598
  }
12297
12599
 
12298
12600
  /* Dark mode for floating toolbar */
12299
- .b-dark .bc-toolbar--floating {
12601
+ .dark .bc-toolbar--floating {
12300
12602
  background: var(--color-base-800);
12301
12603
  border-color: var(--color-base-700);
12302
12604
  }
12303
12605
 
12304
- .b-dark .bc-toolbar--floating .bc-toolbar__button .bc-button {
12606
+ .dark .bc-toolbar--floating .bc-toolbar__button .bc-button {
12305
12607
  color: var(--color-base-300);
12306
12608
  }
12307
12609
 
12308
- .b-dark .bc-toolbar--floating .bc-toolbar__button .bc-button:hover {
12610
+ .dark .bc-toolbar--floating .bc-toolbar__button .bc-button:hover {
12309
12611
  background: var(--color-base-700);
12310
12612
  }
12311
12613
 
12312
- .b-dark
12313
- .bc-toolbar--floating
12314
- .bc-toolbar__button
12315
- .bc-button[aria-pressed='true'],
12316
- .b-dark .bc-toolbar--floating .bc-toolbar__button .bc-button.bc-button--active {
12614
+ .dark .bc-toolbar--floating .bc-toolbar__button .bc-button[aria-pressed='true'],
12615
+ .dark .bc-toolbar--floating .bc-toolbar__button .bc-button.bc-button--active {
12317
12616
  background: var(--color-primary-900);
12318
12617
  color: var(--color-primary-300);
12319
12618
  }
12320
12619
 
12321
- .b-dark .bc-toolbar--floating .bc-toolbar__divider {
12620
+ .dark .bc-toolbar--floating .bc-toolbar__divider {
12322
12621
  background: var(--color-base-700);
12323
12622
  }
12324
12623
 
@@ -12439,28 +12738,28 @@ span.bc-sidebar-link {
12439
12738
  }
12440
12739
 
12441
12740
  /* Dark mode */
12442
- .b-dark .bc-tree-item__row:hover {
12741
+ .dark .bc-tree-item__row:hover {
12443
12742
  background-color: oklch(0.25 0 0);
12444
12743
  }
12445
12744
 
12446
- .b-dark .bc-tree-item__row--selected {
12745
+ .dark .bc-tree-item__row--selected {
12447
12746
  background-color: oklch(0.25 0.03 250);
12448
12747
  color: oklch(0.75 0.12 250);
12449
12748
  }
12450
12749
 
12451
- .b-dark .bc-tree-item__toggle {
12750
+ .dark .bc-tree-item__toggle {
12452
12751
  color: var(--color-gray-400);
12453
12752
  }
12454
12753
 
12455
- .b-dark .bc-tree-item__toggle:hover {
12754
+ .dark .bc-tree-item__toggle:hover {
12456
12755
  color: var(--color-gray-200);
12457
12756
  }
12458
12757
 
12459
- .b-dark .bc-tree-item__icon {
12758
+ .dark .bc-tree-item__icon {
12460
12759
  color: var(--color-gray-400);
12461
12760
  }
12462
12761
 
12463
- .b-dark .bc-tree-item__badge {
12762
+ .dark .bc-tree-item__badge {
12464
12763
  background: oklch(0.25 0 0);
12465
12764
  color: var(--color-gray-300);
12466
12765
  }
@@ -12481,7 +12780,7 @@ span.bc-sidebar-link {
12481
12780
  outline-offset: -2px;
12482
12781
  }
12483
12782
 
12484
- .b-dark .bc-tree-item__row:focus-visible {
12783
+ .dark .bc-tree-item__row:focus-visible {
12485
12784
  outline-color: var(--color-primary-400);
12486
12785
  }
12487
12786
 
@@ -12726,29 +13025,29 @@ span.bc-sidebar-link {
12726
13025
  }
12727
13026
 
12728
13027
  /* Dark mode */
12729
- .b-dark .bc-radio-group__indicator {
13028
+ .dark .bc-radio-group__indicator {
12730
13029
  border-color: var(--border-default);
12731
13030
  background-color: var(--bg-surface);
12732
13031
  }
12733
13032
 
12734
- .b-dark .bc-radio-group__input:checked + .bc-radio-group__indicator {
13033
+ .dark .bc-radio-group__input:checked + .bc-radio-group__indicator {
12735
13034
  border-color: var(--color-primary-400);
12736
13035
  }
12737
13036
 
12738
- .b-dark .bc-radio-group__input:checked + .bc-radio-group__indicator::after {
13037
+ .dark .bc-radio-group__input:checked + .bc-radio-group__indicator::after {
12739
13038
  background-color: var(--color-primary-400);
12740
13039
  }
12741
13040
 
12742
- .b-dark .bc-radio-group__input:focus-visible + .bc-radio-group__indicator {
13041
+ .dark .bc-radio-group__input:focus-visible + .bc-radio-group__indicator {
12743
13042
  outline-color: var(--interactive-focus);
12744
13043
  }
12745
13044
 
12746
- .b-dark .bc-radio-group__input:disabled + .bc-radio-group__indicator {
13045
+ .dark .bc-radio-group__input:disabled + .bc-radio-group__indicator {
12747
13046
  border-color: var(--border-default);
12748
13047
  background-color: var(--bg-subtle);
12749
13048
  }
12750
13049
 
12751
- .b-dark
13050
+ .dark
12752
13051
  .bc-radio-group__input:disabled:checked
12753
13052
  + .bc-radio-group__indicator::after {
12754
13053
  background-color: var(--text-muted);
@@ -12848,6 +13147,67 @@ span.bc-sidebar-link {
12848
13147
  flex-shrink: 0;
12849
13148
  }
12850
13149
 
13150
+ /* Dark mode */
13151
+ .dark .bc-notice--tone-prominent {
13152
+ border-color: var(--color-base-700);
13153
+ }
13154
+
13155
+ .dark .bc-notice--tone-subtle {
13156
+ border-color: var(--color-base-700);
13157
+ }
13158
+
13159
+ .dark .bc-notice--info.bc-notice--tone-prominent {
13160
+ background-color: color-mix(in srgb, var(--color-info-500) 12%, transparent);
13161
+ border-color: var(--color-info-800);
13162
+ color: var(--color-info-200);
13163
+ }
13164
+
13165
+ .dark .bc-notice--success.bc-notice--tone-prominent {
13166
+ background-color: color-mix(
13167
+ in srgb,
13168
+ var(--color-success-500) 12%,
13169
+ transparent
13170
+ );
13171
+ border-color: var(--color-success-800);
13172
+ color: var(--color-success-200);
13173
+ }
13174
+
13175
+ .dark .bc-notice--warning.bc-notice--tone-prominent {
13176
+ background-color: color-mix(
13177
+ in srgb,
13178
+ var(--color-warning-500) 12%,
13179
+ transparent
13180
+ );
13181
+ border-color: var(--color-warning-800);
13182
+ color: var(--color-warning-200);
13183
+ }
13184
+
13185
+ .dark .bc-notice--danger.bc-notice--tone-prominent {
13186
+ background-color: color-mix(
13187
+ in srgb,
13188
+ var(--color-danger-500) 12%,
13189
+ transparent
13190
+ );
13191
+ border-color: var(--color-danger-800);
13192
+ color: var(--color-danger-200);
13193
+ }
13194
+
13195
+ .dark .bc-notice--info.bc-notice--tone-subtle {
13196
+ color: var(--color-info-300);
13197
+ }
13198
+
13199
+ .dark .bc-notice--success.bc-notice--tone-subtle {
13200
+ color: var(--color-success-300);
13201
+ }
13202
+
13203
+ .dark .bc-notice--warning.bc-notice--tone-subtle {
13204
+ color: var(--color-warning-300);
13205
+ }
13206
+
13207
+ .dark .bc-notice--danger.bc-notice--tone-subtle {
13208
+ color: var(--color-danger-300);
13209
+ }
13210
+
12851
13211
  @layer components {
12852
13212
  .bc-notification {
12853
13213
  --notification-accent-color: var(--color-primary-500);
@@ -12964,7 +13324,7 @@ span.bc-sidebar-link {
12964
13324
  align-items: flex-start;
12965
13325
  }
12966
13326
 
12967
- .b-dark .bc-notification {
13327
+ .dark .bc-notification {
12968
13328
  --notification-bg: var(--bg-surface);
12969
13329
  --notification-border-color: var(--color-base-700);
12970
13330
  }
@@ -13142,39 +13502,63 @@ span.bc-sidebar-link {
13142
13502
  }
13143
13503
 
13144
13504
  /* Dark mode */
13145
- .b-dark .bc-notification-panel {
13505
+ .dark .bc-notification-panel {
13146
13506
  background: var(--color-base-800);
13147
13507
  border-color: var(--color-base-700);
13148
13508
  }
13149
13509
 
13150
- .b-dark .bc-notification-panel__header {
13510
+ .dark .bc-notification-panel__header {
13151
13511
  border-color: var(--color-base-700);
13152
13512
  }
13153
13513
 
13154
- .b-dark .bc-notification-panel__header-title {
13514
+ .dark .bc-notification-panel__header-title {
13155
13515
  color: var(--color-base-100);
13156
13516
  }
13157
13517
 
13158
- .b-dark .bc-notification-panel__item:hover {
13518
+ .dark .bc-notification-panel__item:hover {
13159
13519
  background: var(--color-base-700);
13160
13520
  }
13161
13521
 
13162
- .b-dark .bc-notification-panel__item--unread {
13522
+ .dark .bc-notification-panel__item--unread {
13163
13523
  background: rgba(37, 99, 235, 0.08);
13164
13524
  }
13165
13525
 
13166
- .b-dark .bc-notification-panel__item-icon {
13526
+ .dark .bc-notification-panel__item-icon {
13167
13527
  background: var(--color-base-700);
13168
13528
  }
13169
13529
 
13170
- .b-dark .bc-notification-panel__item-title {
13530
+ .dark .bc-notification-panel__item-title {
13171
13531
  color: var(--color-base-100);
13172
13532
  }
13173
13533
 
13174
- .b-dark .bc-notification-panel__item-body {
13534
+ .dark .bc-notification-panel__item-body {
13175
13535
  color: var(--color-base-400);
13176
13536
  }
13177
13537
 
13538
+ .dark .bc-notification-panel__mark-read-btn {
13539
+ color: var(--color-primary-400);
13540
+ }
13541
+
13542
+ .dark .bc-notification-panel__close-btn {
13543
+ color: var(--color-base-500);
13544
+ }
13545
+
13546
+ .dark .bc-notification-panel__item-meta {
13547
+ color: var(--color-base-500);
13548
+ }
13549
+
13550
+ .dark .bc-notification-panel__item-source {
13551
+ color: var(--color-primary-400);
13552
+ }
13553
+
13554
+ .dark .bc-notification-panel__empty {
13555
+ color: var(--color-base-500);
13556
+ }
13557
+
13558
+ .dark .bc-notification-panel__item--unread:hover {
13559
+ background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
13560
+ }
13561
+
13178
13562
  /* Minimal optional controls for VideoPlayer wrapper */
13179
13563
 
13180
13564
  .bc-video-player {
@@ -13610,7 +13994,7 @@ span.bc-sidebar-link {
13610
13994
  text-align: center;
13611
13995
  }
13612
13996
 
13613
- .b-dark .bc-pdf-page-viewer__error-text {
13997
+ .dark .bc-pdf-page-viewer__error-text {
13614
13998
  color: var(--color-danger-400);
13615
13999
  }
13616
14000
 
@@ -13706,11 +14090,11 @@ span.bc-sidebar-link {
13706
14090
  }
13707
14091
 
13708
14092
  /* Dark mode */
13709
- .b-dark .bc-dialog__consequences li::before {
14093
+ .dark .bc-dialog__consequences li::before {
13710
14094
  color: var(--color-base-600);
13711
14095
  }
13712
14096
 
13713
- .b-dark .bc-dialog__icon {
14097
+ .dark .bc-dialog__icon {
13714
14098
  /* In dark mode, use shade 900 for bg and 400 for fg — applied via inline styles */
13715
14099
  }
13716
14100
 
@@ -13778,7 +14162,7 @@ span.bc-sidebar-link {
13778
14162
  }
13779
14163
 
13780
14164
  /* Dark mode overrides */
13781
- .b-dark .bc-ribbon {
14165
+ .dark .bc-ribbon {
13782
14166
  background: var(--ribbon-bg-dark);
13783
14167
  color: var(--ribbon-text-dark);
13784
14168
  }
@@ -13946,31 +14330,31 @@ span.bc-sidebar-link {
13946
14330
  }
13947
14331
 
13948
14332
  /* Dark mode */
13949
- .b-dark .bc-accordion--default {
14333
+ .dark .bc-accordion--default {
13950
14334
  border-color: var(--border-default);
13951
14335
  }
13952
14336
 
13953
- .b-dark .bc-accordion--default .bc-accordion__item + .bc-accordion__item {
14337
+ .dark .bc-accordion--default .bc-accordion__item + .bc-accordion__item {
13954
14338
  border-top-color: var(--border-default);
13955
14339
  }
13956
14340
 
13957
- .b-dark .bc-accordion--separated .bc-accordion__item {
14341
+ .dark .bc-accordion--separated .bc-accordion__item {
13958
14342
  border-color: var(--border-default);
13959
14343
  }
13960
14344
 
13961
- .b-dark .bc-accordion__item {
14345
+ .dark .bc-accordion__item {
13962
14346
  background-color: var(--bg-background);
13963
14347
  }
13964
14348
 
13965
- .b-dark .bc-accordion__header {
14349
+ .dark .bc-accordion__header {
13966
14350
  color: var(--text-normal);
13967
14351
  }
13968
14352
 
13969
- .b-dark .bc-accordion__header:hover:not(:disabled) {
14353
+ .dark .bc-accordion__header:hover:not(:disabled) {
13970
14354
  background-color: var(--bg-subtle);
13971
14355
  }
13972
14356
 
13973
- .b-dark .bc-accordion__body {
14357
+ .dark .bc-accordion__body {
13974
14358
  color: var(--text-normal);
13975
14359
  }
13976
14360
 
@@ -14395,82 +14779,82 @@ span.bc-sidebar-link {
14395
14779
  }
14396
14780
 
14397
14781
  /* Dark mode */
14398
- .b-dark .bc-calendar {
14782
+ .dark .bc-calendar {
14399
14783
  background-color: var(--bg-background);
14400
14784
  border-color: var(--border-default);
14401
14785
  }
14402
14786
 
14403
- .b-dark .bc-calendar__nav-btn {
14787
+ .dark .bc-calendar__nav-btn {
14404
14788
  color: var(--text-normal);
14405
14789
  }
14406
14790
 
14407
- .b-dark .bc-calendar__nav-btn:hover:not(:disabled) {
14791
+ .dark .bc-calendar__nav-btn:hover:not(:disabled) {
14408
14792
  background-color: var(--bg-subtle);
14409
14793
  }
14410
14794
 
14411
- .b-dark .bc-calendar__title {
14795
+ .dark .bc-calendar__title {
14412
14796
  color: var(--text-normal);
14413
14797
  }
14414
14798
 
14415
- .b-dark .bc-calendar__weekday {
14799
+ .dark .bc-calendar__weekday {
14416
14800
  color: var(--text-muted);
14417
14801
  }
14418
14802
 
14419
- .b-dark .bc-calendar__day {
14803
+ .dark .bc-calendar__day {
14420
14804
  color: var(--text-normal);
14421
14805
  }
14422
14806
 
14423
- .b-dark .bc-calendar__day:hover:not(:disabled) {
14807
+ .dark .bc-calendar__day:hover:not(:disabled) {
14424
14808
  background-color: var(--bg-subtle);
14425
14809
  }
14426
14810
 
14427
- .b-dark .bc-calendar__day--selected {
14811
+ .dark .bc-calendar__day--selected {
14428
14812
  background-color: var(--cal-selected-bg-dark);
14429
14813
  color: var(--cal-selected-text-dark);
14430
14814
  }
14431
14815
 
14432
- .b-dark .bc-calendar__day--today {
14816
+ .dark .bc-calendar__day--today {
14433
14817
  background-color: var(--cal-today-bg-dark);
14434
14818
  color: var(--cal-today-text-dark);
14435
14819
  }
14436
14820
 
14437
- .b-dark .bc-calendar__day--selected.bc-calendar__day--today {
14821
+ .dark .bc-calendar__day--selected.bc-calendar__day--today {
14438
14822
  background-color: var(--cal-selected-bg-dark);
14439
14823
  color: var(--cal-selected-text-dark);
14440
14824
  }
14441
14825
 
14442
- .b-dark .bc-calendar__title-btn {
14826
+ .dark .bc-calendar__title-btn {
14443
14827
  color: var(--text-normal);
14444
14828
  }
14445
14829
 
14446
- .b-dark .bc-calendar__title-btn:hover:not(:disabled) {
14830
+ .dark .bc-calendar__title-btn:hover:not(:disabled) {
14447
14831
  background-color: var(--bg-subtle);
14448
14832
  }
14449
14833
 
14450
- .b-dark .bc-calendar__month-cell,
14451
- .b-dark .bc-calendar__year-cell {
14834
+ .dark .bc-calendar__month-cell,
14835
+ .dark .bc-calendar__year-cell {
14452
14836
  color: var(--text-normal);
14453
14837
  }
14454
14838
 
14455
- .b-dark .bc-calendar__month-cell:hover:not(:disabled),
14456
- .b-dark .bc-calendar__year-cell:hover:not(:disabled) {
14839
+ .dark .bc-calendar__month-cell:hover:not(:disabled),
14840
+ .dark .bc-calendar__year-cell:hover:not(:disabled) {
14457
14841
  background-color: var(--bg-subtle);
14458
14842
  }
14459
14843
 
14460
- .b-dark .bc-calendar__month-cell--current,
14461
- .b-dark .bc-calendar__year-cell--current {
14844
+ .dark .bc-calendar__month-cell--current,
14845
+ .dark .bc-calendar__year-cell--current {
14462
14846
  background-color: var(--cal-selected-bg-dark);
14463
14847
  color: var(--cal-selected-text-dark);
14464
14848
  }
14465
14849
 
14466
- .b-dark .bc-calendar__month-cell--active,
14467
- .b-dark .bc-calendar__year-cell--active {
14850
+ .dark .bc-calendar__month-cell--active,
14851
+ .dark .bc-calendar__year-cell--active {
14468
14852
  background-color: var(--cal-today-bg-dark);
14469
14853
  color: var(--cal-today-text-dark);
14470
14854
  }
14471
14855
 
14472
- .b-dark .bc-calendar__month-cell--current.bc-calendar__month-cell--active,
14473
- .b-dark .bc-calendar__year-cell--current.bc-calendar__year-cell--active {
14856
+ .dark .bc-calendar__month-cell--current.bc-calendar__month-cell--active,
14857
+ .dark .bc-calendar__year-cell--current.bc-calendar__year-cell--active {
14474
14858
  background-color: var(--cal-selected-bg-dark);
14475
14859
  color: var(--cal-selected-text-dark);
14476
14860
  }
@@ -14516,13 +14900,13 @@ span.bc-sidebar-link {
14516
14900
  }
14517
14901
 
14518
14902
  /* Range selection - dark mode */
14519
- .b-dark .bc-calendar__day--range-start,
14520
- .b-dark .bc-calendar__day--range-end {
14903
+ .dark .bc-calendar__day--range-start,
14904
+ .dark .bc-calendar__day--range-end {
14521
14905
  background-color: var(--cal-selected-bg-dark);
14522
14906
  color: var(--cal-selected-text-dark);
14523
14907
  }
14524
14908
 
14525
- .b-dark .bc-calendar__day--in-range {
14909
+ .dark .bc-calendar__day--in-range {
14526
14910
  background-color: var(--cal-today-bg-dark);
14527
14911
  color: var(--cal-today-text-dark);
14528
14912
  }
@@ -14820,28 +15204,28 @@ span.bc-sidebar-link {
14820
15204
  }
14821
15205
 
14822
15206
  /* Dark mode */
14823
- .b-dark .bc-advanced-slider__track {
15207
+ .dark .bc-advanced-slider__track {
14824
15208
  background-color: var(--bg-subtle);
14825
15209
  }
14826
15210
 
14827
- .b-dark .bc-advanced-slider__fill {
15211
+ .dark .bc-advanced-slider__fill {
14828
15212
  background-color: var(--slider-color-dark);
14829
15213
  }
14830
15214
 
14831
- .b-dark .bc-advanced-slider__thumb {
15215
+ .dark .bc-advanced-slider__thumb {
14832
15216
  background-color: var(--text-normal);
14833
15217
  border-color: var(--slider-color-dark);
14834
15218
  }
14835
15219
 
14836
- .b-dark .bc-advanced-slider__value-label {
15220
+ .dark .bc-advanced-slider__value-label {
14837
15221
  background-color: var(--slider-color-dark);
14838
15222
  }
14839
15223
 
14840
- .b-dark .bc-advanced-slider__tick::before {
15224
+ .dark .bc-advanced-slider__tick::before {
14841
15225
  background-color: var(--color-gray-500);
14842
15226
  }
14843
15227
 
14844
- .b-dark .bc-advanced-slider__tick-label {
15228
+ .dark .bc-advanced-slider__tick-label {
14845
15229
  color: var(--text-muted);
14846
15230
  }
14847
15231
 
@@ -14948,20 +15332,20 @@ span.bc-sidebar-link {
14948
15332
  }
14949
15333
 
14950
15334
  /* Dark mode */
14951
- .b-dark .bc-otp-input__cell {
15335
+ .dark .bc-otp-input__cell {
14952
15336
  background-color: var(--bg-background);
14953
15337
  border-color: var(--border-default);
14954
15338
  color: var(--text-normal);
14955
15339
  }
14956
15340
 
14957
- .b-dark .bc-otp-input__cell:focus,
14958
- .b-dark .bc-otp-input__cell--focused {
15341
+ .dark .bc-otp-input__cell:focus,
15342
+ .dark .bc-otp-input__cell--focused {
14959
15343
  border-color: var(--otp-focus-border-dark);
14960
15344
  box-shadow: 0 0 0 2px
14961
15345
  color-mix(in srgb, var(--otp-focus-color-dark) 25%, transparent);
14962
15346
  }
14963
15347
 
14964
- .b-dark .bc-otp-input__cell::placeholder {
15348
+ .dark .bc-otp-input__cell::placeholder {
14965
15349
  color: var(--text-muted);
14966
15350
  }
14967
15351
 
@@ -14991,10 +15375,17 @@ span.bc-sidebar-link {
14991
15375
  background-color: var(--toggle-bg);
14992
15376
  color: var(--toggle-text);
14993
15377
  text-shadow: var(--toggle-text-shadow);
15378
+ line-height: 1;
14994
15379
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
14995
15380
  user-select: none;
14996
15381
  }
14997
15382
 
15383
+ /* Keep icons sized to the font so icon-only buttons match text button height */
15384
+ .bc-toggle-button .bc-icon {
15385
+ width: 1em;
15386
+ height: 1em;
15387
+ }
15388
+
14998
15389
  .bc-toggle-button--full-width {
14999
15390
  width: 100%;
15000
15391
  }
@@ -15051,14 +15442,14 @@ span.bc-sidebar-link {
15051
15442
  }
15052
15443
 
15053
15444
  /* Dark mode */
15054
- .b-dark .bc-toggle-button {
15445
+ .dark .bc-toggle-button {
15055
15446
  background-color: var(--toggle-bg-dark);
15056
15447
  color: var(--toggle-text-dark);
15057
15448
  border-color: var(--toggle-border-dark);
15058
15449
  text-shadow: var(--toggle-text-shadow-dark);
15059
15450
  }
15060
15451
 
15061
- .b-dark .bc-toggle-button:hover:not(:disabled) {
15452
+ .dark .bc-toggle-button:hover:not(:disabled) {
15062
15453
  background-color: var(--toggle-bg-hover-dark);
15063
15454
  color: var(--toggle-text-hover-dark);
15064
15455
  }