@tempots/beatui 0.83.5 → 0.85.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 (63) hide show
  1. package/dist/beatui.css +840 -428
  2. package/dist/beatui.tailwind.css +840 -428
  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 +865 -848
  15. package/dist/json-schema/index.cjs.js +1 -1
  16. package/dist/json-schema/index.es.js +2 -2
  17. package/dist/lexical/index.cjs.js +2 -2
  18. package/dist/lexical/index.es.js +5 -5
  19. package/dist/lexical.css +79 -79
  20. package/dist/markdown/index.cjs.js +1 -1
  21. package/dist/markdown/index.es.js +1 -1
  22. package/dist/menu-DMAhcoJ2.js +377 -0
  23. package/dist/menu-q8xJaBIb.cjs +1 -0
  24. package/dist/monaco/index.cjs.js +2 -2
  25. package/dist/monaco/index.es.js +2 -2
  26. package/dist/prosemirror/index.cjs.js +1 -1
  27. package/dist/prosemirror/index.es.js +1 -1
  28. package/dist/prosemirror.css +10 -10
  29. package/dist/styles-url-BSUFsmMD.cjs +1 -0
  30. package/dist/styles-url-BvcVGpBJ.js +4 -0
  31. package/dist/styles-url-BzPix7VR.cjs +1 -0
  32. package/dist/styles-url-CCopc5pG.js +4 -0
  33. package/dist/styles-url-CEDSZTyZ.cjs +1 -0
  34. package/dist/styles-url-CSXq0ZRz.js +4 -0
  35. package/dist/styles-url-DZhZ-9Bf.js +4 -0
  36. package/dist/styles-url-YAJ6Q1GS.cjs +1 -0
  37. package/dist/tailwind/preset.cjs.js +1 -1
  38. package/dist/tailwind/preset.es.js +18 -18
  39. package/dist/tailwind/vite-plugin.cjs.js +12 -15
  40. package/dist/tailwind/vite-plugin.es.js +178 -181
  41. package/dist/{theme-B5pmbvQ_.js → theme-BzpMLdvH.js} +6 -6
  42. package/dist/theme-DogY9oT1.cjs +1 -0
  43. package/dist/types/components/form/input/advanced-slider.d.ts +1 -1
  44. package/dist/types/components/form/input/combobox-input.d.ts +2 -0
  45. package/dist/types/components/form/input/switch.d.ts +2 -1
  46. package/dist/types/components/theme/theme.d.ts +5 -4
  47. package/dist/types/tailwind/preset.d.ts +1 -1
  48. package/dist/widget-customization-BngYjPvO.cjs +1 -0
  49. package/dist/{widget-customization-0is7oTeP.js → widget-customization-D-Vvr4vg.js} +300 -329
  50. package/package.json +1 -1
  51. package/dist/index-DH37GTQj.cjs +0 -1
  52. package/dist/menu-CX72LaZ3.cjs +0 -1
  53. package/dist/menu-D_slbwl8.js +0 -374
  54. package/dist/styles-url-B3p8AqBy.cjs +0 -1
  55. package/dist/styles-url-COuz9fVH.js +0 -4
  56. package/dist/styles-url-CVCcF0ra.cjs +0 -1
  57. package/dist/styles-url-CZUL_YRT.cjs +0 -1
  58. package/dist/styles-url-CzNVxeM7.js +0 -4
  59. package/dist/styles-url-D8MjxiP-.cjs +0 -1
  60. package/dist/styles-url-DUdp56Ts.js +0 -4
  61. package/dist/styles-url-DpP5gepF.js +0 -4
  62. package/dist/theme-Dt6lCAvY.cjs +0 -1
  63. package/dist/widget-customization-B-LmxkPE.cjs +0 -1
package/dist/beatui.css CHANGED
@@ -628,10 +628,7 @@ ol {
628
628
  --motion-transition-slow: var(--motion-duration-slow);
629
629
  --motion-transition-overlay: var(--motion-duration-relaxed);
630
630
  --motion-transition-emphasis: var(--motion-duration-fast);
631
- --motion-easing-standard: var(--motion-easing-standard);
632
631
  --motion-easing-emphasis: var(--motion-easing-emphasized);
633
- --motion-easing-entrance: var(--motion-easing-entrance);
634
- --motion-easing-exit: var(--motion-easing-exit);
635
632
  --spacing-stack-2xs: calc(var(--spacing-base) / 2);
636
633
  --spacing-stack-xs: calc(var(--spacing-base) * 1);
637
634
  --spacing-stack-sm: calc(var(--spacing-base) * 2);
@@ -902,7 +899,7 @@ input:where([type='button'], [type='reset'], [type='submit']),
902
899
  }
903
900
 
904
901
  /* BeatUI theme helpers */
905
- .b-dark {
902
+ .dark {
906
903
  color-scheme: dark;
907
904
  --text-normal: var(--text-normal-dark);
908
905
  --text-muted: var(--text-muted-dark);
@@ -927,7 +924,7 @@ input:where([type='button'], [type='reset'], [type='submit']),
927
924
  background-color: var(--bg-background);
928
925
  }
929
926
 
930
- .b-light {
927
+ .light {
931
928
  color-scheme: light;
932
929
  --text-normal: var(--text-normal-light);
933
930
  --text-muted: var(--text-muted-light);
@@ -952,11 +949,11 @@ input:where([type='button'], [type='reset'], [type='submit']),
952
949
  background-color: var(--bg-background);
953
950
  }
954
951
 
955
- .b-dark *:focus-visible {
952
+ .dark *:focus-visible {
956
953
  outline-color: var(--interactive-focus);
957
954
  }
958
955
 
959
- .b-light *:focus-visible {
956
+ .light *:focus-visible {
960
957
  outline-color: var(--interactive-focus);
961
958
  }
962
959
 
@@ -1024,7 +1021,7 @@ input:where([type='button'], [type='reset'], [type='submit']),
1024
1021
  }
1025
1022
 
1026
1023
  /* Dark mode focus styles */
1027
- .b-dark *:focus-visible {
1024
+ .dark *:focus-visible {
1028
1025
  outline-color: var(--interactive-focus-dark);
1029
1026
  }
1030
1027
 
@@ -1071,7 +1068,7 @@ a:focus-visible {
1071
1068
  border-radius: var(--radius-pill, var(--radius-full));
1072
1069
  }
1073
1070
 
1074
- .b-dark .bc-switch:focus-visible .bc-switch__track {
1071
+ .dark .bc-switch:focus-visible .bc-switch__track {
1075
1072
  outline-color: var(--interactive-focus-dark);
1076
1073
  }
1077
1074
 
@@ -1083,8 +1080,8 @@ a:focus-visible {
1083
1080
  border-radius: var(--radius-focus, var(--radius-sm));
1084
1081
  }
1085
1082
 
1086
- .b-dark .bc-checkbox-input__checkbox:focus-visible,
1087
- .b-dark .bc-radio-input__radio:focus-visible {
1083
+ .dark .bc-checkbox-input__checkbox:focus-visible,
1084
+ .dark .bc-radio-input__radio:focus-visible {
1088
1085
  outline-color: var(--interactive-focus-dark);
1089
1086
  }
1090
1087
 
@@ -1221,11 +1218,11 @@ a:focus-visible {
1221
1218
  --action-card-border: var(--color-primary-600);
1222
1219
  }
1223
1220
 
1224
- .b-dark .bc-action-card--active {
1221
+ .dark .bc-action-card--active {
1225
1222
  --action-card-border: var(--color-primary-400);
1226
1223
  }
1227
1224
 
1228
- .b-dark .bc-action-card--active:hover {
1225
+ .dark .bc-action-card--active:hover {
1229
1226
  --action-card-border: var(--color-primary-300);
1230
1227
  }
1231
1228
 
@@ -1600,7 +1597,7 @@ a:focus-visible {
1600
1597
  }
1601
1598
 
1602
1599
  /* Dark mode */
1603
- .b-dark .bc-auth-container--styled {
1600
+ .dark .bc-auth-container--styled {
1604
1601
  background-color: var(--bg-surface);
1605
1602
  }
1606
1603
 
@@ -1636,7 +1633,7 @@ a:focus-visible {
1636
1633
  border: 2px solid var(--border-default);
1637
1634
  }
1638
1635
 
1639
- .b-dark .bc-auth-container--styled {
1636
+ .dark .bc-auth-container--styled {
1640
1637
  border-color: var(--border-default);
1641
1638
  }
1642
1639
  }
@@ -1665,7 +1662,7 @@ a:focus-visible {
1665
1662
  border-radius: var(--radius-full);
1666
1663
  }
1667
1664
 
1668
- .b-dark .bc-auth-divider__text {
1665
+ .dark .bc-auth-divider__text {
1669
1666
  color: var(--color-white);
1670
1667
  }
1671
1668
 
@@ -1753,7 +1750,7 @@ a:focus-visible {
1753
1750
  margin-top: var(--spacing-xs);
1754
1751
  }
1755
1752
 
1756
- .b-dark .bc-auth-form__field-error {
1753
+ .dark .bc-auth-form__field-error {
1757
1754
  color: var(--color-danger-400);
1758
1755
  }
1759
1756
 
@@ -1797,11 +1794,11 @@ a:focus-visible {
1797
1794
  outline-offset: 2px;
1798
1795
  }
1799
1796
 
1800
- .b-dark .bc-auth-form__link {
1797
+ .dark .bc-auth-form__link {
1801
1798
  color: var(--color-primary-400);
1802
1799
  }
1803
1800
 
1804
- .b-dark .bc-auth-form__link:hover {
1801
+ .dark .bc-auth-form__link:hover {
1805
1802
  color: var(--color-primary-300);
1806
1803
  background-color: var(--color-primary-950);
1807
1804
  }
@@ -1863,7 +1860,7 @@ a:focus-visible {
1863
1860
  padding: calc(var(--spacing-base) * 1);
1864
1861
  }
1865
1862
 
1866
- .b-dark .bc-social-login-button__icon {
1863
+ .dark .bc-social-login-button__icon {
1867
1864
  background-color: var(--bg-elevated);
1868
1865
  }
1869
1866
 
@@ -1871,7 +1868,7 @@ a:focus-visible {
1871
1868
  color: var(--color-base-900);
1872
1869
  }
1873
1870
 
1874
- .b-dark .bc-social-login-button__icon-inner {
1871
+ .dark .bc-social-login-button__icon-inner {
1875
1872
  color: var(--text-normal);
1876
1873
  }
1877
1874
 
@@ -2046,7 +2043,7 @@ a:focus-visible {
2046
2043
  padding-bottom: var(--spacing-sm);
2047
2044
  }
2048
2045
 
2049
- .b-dark .bc-two-factor__methods {
2046
+ .dark .bc-two-factor__methods {
2050
2047
  border-bottom-color: var(--color-neutral-700);
2051
2048
  }
2052
2049
 
@@ -2074,12 +2071,12 @@ a:focus-visible {
2074
2071
  border-bottom: 2px solid var(--color-primary-600);
2075
2072
  }
2076
2073
 
2077
- .b-dark .bc-two-factor__method-button:hover {
2074
+ .dark .bc-two-factor__method-button:hover {
2078
2075
  color: var(--text-normal);
2079
2076
  background-color: var(--color-neutral-800);
2080
2077
  }
2081
2078
 
2082
- .b-dark .bc-two-factor__method-button--active {
2079
+ .dark .bc-two-factor__method-button--active {
2083
2080
  color: var(--color-primary-400);
2084
2081
  border-bottom-color: var(--color-primary-400);
2085
2082
  }
@@ -2103,7 +2100,7 @@ a:focus-visible {
2103
2100
  text-align: center;
2104
2101
  }
2105
2102
 
2106
- .b-dark .bc-two-factor__code-display {
2103
+ .dark .bc-two-factor__code-display {
2107
2104
  background-color: var(--color-neutral-800);
2108
2105
  }
2109
2106
 
@@ -2132,7 +2129,7 @@ a:focus-visible {
2132
2129
  text-align: center;
2133
2130
  }
2134
2131
 
2135
- .b-dark .bc-two-factor__backup-codes li {
2132
+ .dark .bc-two-factor__backup-codes li {
2136
2133
  background-color: var(--color-neutral-800);
2137
2134
  }
2138
2135
 
@@ -2184,7 +2181,7 @@ a:focus-visible {
2184
2181
  border: 1px solid var(--color-neutral-200);
2185
2182
  }
2186
2183
 
2187
- .b-dark .bc-passkey-item {
2184
+ .dark .bc-passkey-item {
2188
2185
  background-color: var(--color-neutral-900);
2189
2186
  border-color: var(--color-neutral-700);
2190
2187
  }
@@ -2369,18 +2366,18 @@ a:focus-visible {
2369
2366
  }
2370
2367
 
2371
2368
  /* Dark mode styles */
2372
- .b-dark .bc-avatar {
2369
+ .dark .bc-avatar {
2373
2370
  background-color: var(--avatar-bg-dark);
2374
2371
  color: var(--avatar-text-dark);
2375
2372
  }
2376
2373
 
2377
- .b-dark .bc-avatar--bordered {
2374
+ .dark .bc-avatar--bordered {
2378
2375
  border-color: var(--bg-background-dark, var(--color-base-950));
2379
2376
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
2380
2377
  }
2381
2378
 
2382
- .b-dark .bc-avatar-group--spacing-tight > .bc-avatar,
2383
- .b-dark .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
2379
+ .dark .bc-avatar-group--spacing-tight > .bc-avatar,
2380
+ .dark .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
2384
2381
  border-color: var(--bg-background-dark, var(--color-base-950));
2385
2382
  }
2386
2383
 
@@ -2553,13 +2550,13 @@ a:focus-visible {
2553
2550
  }
2554
2551
 
2555
2552
  /* Dark mode styles */
2556
- .b-dark .bc-badge {
2553
+ .dark .bc-badge {
2557
2554
  background-color: var(--badge-bg-dark);
2558
2555
  color: var(--badge-text-dark);
2559
2556
  border-color: var(--badge-border-dark);
2560
2557
  }
2561
2558
 
2562
- .b-dark .bc-badge:hover {
2559
+ .dark .bc-badge:hover {
2563
2560
  background-color: var(--badge-bg-hover-dark);
2564
2561
  color: var(--badge-text-hover-dark);
2565
2562
  }
@@ -2696,25 +2693,25 @@ a:focus-visible {
2696
2693
  }
2697
2694
 
2698
2695
  /* Dark mode */
2699
- .b-dark .bc-block-command-palette {
2696
+ .dark .bc-block-command-palette {
2700
2697
  background: var(--color-base-800);
2701
2698
  border-color: var(--color-base-700);
2702
2699
  }
2703
2700
 
2704
- .b-dark .bc-block-command-palette__search {
2701
+ .dark .bc-block-command-palette__search {
2705
2702
  border-color: var(--color-base-700);
2706
2703
  }
2707
2704
 
2708
- .b-dark .bc-block-command-palette__search-input {
2705
+ .dark .bc-block-command-palette__search-input {
2709
2706
  color: var(--color-base-100);
2710
2707
  }
2711
2708
 
2712
- .b-dark .bc-block-command-palette__item:hover,
2713
- .b-dark .bc-block-command-palette__item--selected {
2709
+ .dark .bc-block-command-palette__item:hover,
2710
+ .dark .bc-block-command-palette__item--selected {
2714
2711
  background: var(--color-base-700);
2715
2712
  }
2716
2713
 
2717
- .b-dark .bc-block-command-palette__item-label {
2714
+ .dark .bc-block-command-palette__item-label {
2718
2715
  color: var(--color-base-100);
2719
2716
  }
2720
2717
 
@@ -2781,8 +2778,8 @@ a:focus-visible {
2781
2778
  outline-offset: 2px;
2782
2779
  }
2783
2780
 
2784
- .b-dark .bc-breadcrumbs__link:focus-visible,
2785
- .b-dark .bc-breadcrumbs__button:focus-visible {
2781
+ .dark .bc-breadcrumbs__link:focus-visible,
2782
+ .dark .bc-breadcrumbs__button:focus-visible {
2786
2783
  outline-color: var(--color-primary-400);
2787
2784
  }
2788
2785
 
@@ -2927,6 +2924,11 @@ a:focus-visible {
2927
2924
  opacity: 0.5;
2928
2925
  }
2929
2926
 
2927
+ .bc-button--loading .bc-icon {
2928
+ width: 1em;
2929
+ height: 1em;
2930
+ }
2931
+
2930
2932
  .bc-button--size-xs {
2931
2933
  font-size: var(--font-size-xs);
2932
2934
  }
@@ -2948,7 +2950,7 @@ a:focus-visible {
2948
2950
  }
2949
2951
 
2950
2952
  /* Dark mode styles */
2951
- .b-dark .bc-button {
2953
+ .dark .bc-button {
2952
2954
  background-color: var(--button-bg-dark);
2953
2955
  color: var(--button-text-dark);
2954
2956
  border-color: var(--button-border-dark);
@@ -2958,7 +2960,7 @@ a:focus-visible {
2958
2960
  );
2959
2961
  }
2960
2962
 
2961
- .b-dark .bc-button:hover:not(:disabled) {
2963
+ .dark .bc-button:hover:not(:disabled) {
2962
2964
  background-color: var(--button-bg-hover-dark);
2963
2965
  color: var(--button-text-hover-dark);
2964
2966
  }
@@ -3056,7 +3058,7 @@ a:focus-visible {
3056
3058
  }
3057
3059
 
3058
3060
  /* Dark mode styles */
3059
- .b-dark .bc-card--elevated {
3061
+ .dark .bc-card--elevated {
3060
3062
  --card-bg: var(--bg-elevated);
3061
3063
  }
3062
3064
 
@@ -3161,25 +3163,25 @@ a:focus-visible {
3161
3163
  user-select: none;
3162
3164
  }
3163
3165
 
3164
- .b-dark .bc-checkbox-input__checkbox {
3166
+ .dark .bc-checkbox-input__checkbox {
3165
3167
  color: var(--color-base-500);
3166
3168
  }
3167
3169
 
3168
- .b-dark .bc-checkbox-input__checkbox--checked {
3170
+ .dark .bc-checkbox-input__checkbox--checked {
3169
3171
  color: var(--color-primary-400);
3170
3172
  }
3171
3173
 
3172
- .b-dark .bc-checkbox-input__checkbox--unchecked {
3174
+ .dark .bc-checkbox-input__checkbox--unchecked {
3173
3175
  color: var(--color-base-500);
3174
3176
  }
3175
3177
 
3176
- .b-dark .bc-checkbox-input__checkbox:focus-visible,
3177
- .b-dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
3178
+ .dark .bc-checkbox-input__checkbox:focus-visible,
3179
+ .dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
3178
3180
  outline: 2px solid var(--interactive-focus);
3179
3181
  outline-offset: 2px;
3180
3182
  }
3181
3183
 
3182
- .b-dark .bc-checkbox-input__label {
3184
+ .dark .bc-checkbox-input__label {
3183
3185
  color: var(--text-normal);
3184
3186
  }
3185
3187
 
@@ -3333,9 +3335,7 @@ a:focus-visible {
3333
3335
  }
3334
3336
 
3335
3337
  /* Dark mode */
3336
- .b-dark
3337
- .bc-input-container--error
3338
- .bc-color-swatch-input__control:focus-within {
3338
+ .dark .bc-input-container--error .bc-color-swatch-input__control:focus-within {
3339
3339
  outline: 2px solid var(--color-danger-400);
3340
3340
  }
3341
3341
 
@@ -3489,6 +3489,12 @@ a:focus-visible {
3489
3489
  border-bottom: 1px solid var(--color-gray-300);
3490
3490
  }
3491
3491
 
3492
+ /* Dark mode */
3493
+ .dark .bc-dropdown__search-input {
3494
+ background-color: var(--color-base-800);
3495
+ border-bottom-color: var(--color-base-600);
3496
+ }
3497
+
3492
3498
  /* Dropdown Component */
3493
3499
  .bc-dropdown {
3494
3500
  position: relative;
@@ -3627,31 +3633,31 @@ a:focus-visible {
3627
3633
  }
3628
3634
 
3629
3635
  /* Dark mode styles */
3630
- .b-dark .bc-dropdown__listbox {
3636
+ .dark .bc-dropdown__listbox {
3631
3637
  background-color: var(--bg-surface);
3632
3638
  border-color: var(--border-default);
3633
3639
  color: var(--text-normal);
3634
3640
  }
3635
3641
 
3636
- .b-dark .bc-dropdown__option {
3642
+ .dark .bc-dropdown__option {
3637
3643
  color: var(--text-normal);
3638
3644
  }
3639
3645
 
3640
- .b-dark .bc-dropdown__option:hover {
3646
+ .dark .bc-dropdown__option:hover {
3641
3647
  background-color: var(--interactive-hover);
3642
3648
  }
3643
3649
 
3644
- .b-dark .bc-dropdown__option--focused {
3650
+ .dark .bc-dropdown__option--focused {
3645
3651
  background-color: var(--color-primary-900);
3646
3652
  color: var(--color-primary-100);
3647
3653
  }
3648
3654
 
3649
- .b-dark .bc-dropdown__option--selected {
3655
+ .dark .bc-dropdown__option--selected {
3650
3656
  background-color: var(--color-primary-500);
3651
3657
  color: var(--color-white);
3652
3658
  }
3653
3659
 
3654
- .b-dark .bc-dropdown__separator {
3660
+ .dark .bc-dropdown__separator {
3655
3661
  border-color: var(--border-divider);
3656
3662
  }
3657
3663
 
@@ -3868,19 +3874,19 @@ a:focus-visible {
3868
3874
  }
3869
3875
 
3870
3876
  /* Dark mode styles */
3871
- .b-dark .bc-control-input-wrapper__label-text--default {
3877
+ .dark .bc-control-input-wrapper__label-text--default {
3872
3878
  color: var(--text-normal);
3873
3879
  }
3874
3880
 
3875
- .b-dark .bc-control-input-wrapper__label-text--error {
3881
+ .dark .bc-control-input-wrapper__label-text--error {
3876
3882
  color: var(--color-danger-300);
3877
3883
  }
3878
3884
 
3879
- .b-dark .bc-control-input-wrapper__required {
3885
+ .dark .bc-control-input-wrapper__required {
3880
3886
  color: var(--color-danger-400);
3881
3887
  }
3882
3888
 
3883
- .b-dark .bc-control-input-wrapper__error {
3889
+ .dark .bc-control-input-wrapper__error {
3884
3890
  color: var(--color-danger-400);
3885
3891
  }
3886
3892
 
@@ -4043,11 +4049,11 @@ a:focus-visible {
4043
4049
  }
4044
4050
 
4045
4051
  /* Dark mode styles */
4046
- .b-dark .bc-divider--labeled.bc-divider--tone-subtle .bc-divider__label {
4052
+ .dark .bc-divider--labeled.bc-divider--tone-subtle .bc-divider__label {
4047
4053
  color: var(--color-base-500);
4048
4054
  }
4049
4055
 
4050
- .b-dark .bc-divider--labeled.bc-divider--tone-strong .bc-divider__label {
4056
+ .dark .bc-divider--labeled.bc-divider--tone-strong .bc-divider__label {
4051
4057
  color: var(--text-normal);
4052
4058
  }
4053
4059
 
@@ -4353,18 +4359,18 @@ a:focus-visible {
4353
4359
  }
4354
4360
 
4355
4361
  /* Dark mode styles */
4356
- .b-dark .bc-drawer {
4362
+ .dark .bc-drawer {
4357
4363
  background-color: var(--bg-surface);
4358
4364
  color: var(--text-normal);
4359
4365
  border: 1px solid var(--border-default);
4360
4366
  }
4361
4367
 
4362
- .b-dark .bc-drawer__header {
4368
+ .dark .bc-drawer__header {
4363
4369
  border-bottom: 1px solid var(--border-divider);
4364
4370
  background-color: var(--bg-elevated);
4365
4371
  }
4366
4372
 
4367
- .b-dark .bc-drawer__footer {
4373
+ .dark .bc-drawer__footer {
4368
4374
  border-top: 1px solid var(--border-divider);
4369
4375
  background-color: var(--bg-elevated);
4370
4376
  }
@@ -4493,21 +4499,21 @@ a:focus-visible {
4493
4499
  }
4494
4500
 
4495
4501
  /* Dark mode styles */
4496
- .b-dark .bc-editable-text {
4502
+ .dark .bc-editable-text {
4497
4503
  border-bottom-color: var(--border-default);
4498
4504
  color: var(--text-normal);
4499
4505
  }
4500
4506
 
4501
- .b-dark .bc-editable-text__edit-button {
4507
+ .dark .bc-editable-text__edit-button {
4502
4508
  color: var(--color-yellow-400);
4503
4509
  }
4504
4510
 
4505
- .b-dark .bc-editable-text__edit-button:hover {
4511
+ .dark .bc-editable-text__edit-button:hover {
4506
4512
  background-color: var(--interactive-hover);
4507
4513
  color: var(--color-yellow-300);
4508
4514
  }
4509
4515
 
4510
- .b-dark .bc-editable-text__edit-button:active {
4516
+ .dark .bc-editable-text__edit-button:active {
4511
4517
  background-color: var(--interactive-active);
4512
4518
  }
4513
4519
 
@@ -5150,6 +5156,218 @@ a:focus-visible {
5150
5156
  opacity: 0.6;
5151
5157
  }
5152
5158
 
5159
+ /* Dark mode */
5160
+ .dark .bc-file-input__drop-zone {
5161
+ border-color: var(--color-base-600);
5162
+ }
5163
+
5164
+ .dark .bc-file-input__drop-zone:hover {
5165
+ border-color: var(--color-primary-400);
5166
+ background-color: color-mix(
5167
+ in srgb,
5168
+ var(--color-primary-500) 10%,
5169
+ transparent
5170
+ );
5171
+ }
5172
+
5173
+ .dark .bc-file-input__drop-zone-content--empty {
5174
+ color: var(--color-base-400);
5175
+ }
5176
+
5177
+ .dark .bc-file-input__drop-zone-content--drag-over {
5178
+ color: var(--color-primary-300);
5179
+ background-color: color-mix(
5180
+ in srgb,
5181
+ var(--color-primary-500) 10%,
5182
+ transparent
5183
+ );
5184
+ }
5185
+
5186
+ .dark .bc-file-input__drop-zone-content--has-files {
5187
+ color: var(--color-base-400);
5188
+ }
5189
+
5190
+ .dark .bc-file-input__file-list {
5191
+ border-top-color: var(--color-base-700);
5192
+ }
5193
+
5194
+ .dark .bc-file-input__file-item {
5195
+ border-color: var(--color-base-700);
5196
+ background-color: var(--bg-surface);
5197
+ }
5198
+
5199
+ .dark .bc-file-input__file-item:hover {
5200
+ border-color: var(--color-base-600);
5201
+ }
5202
+
5203
+ .dark .bc-file-input__file-name {
5204
+ color: var(--text-normal);
5205
+ }
5206
+
5207
+ .dark .bc-file-input__file-meta {
5208
+ color: var(--color-base-400);
5209
+ }
5210
+
5211
+ .dark .bc-file-input__thumbnail-container {
5212
+ background-color: var(--color-base-800);
5213
+ }
5214
+
5215
+ .dark .bc-file-input__remove-button {
5216
+ color: var(--color-base-500);
5217
+ }
5218
+
5219
+ .dark .bc-file-input__remove-button:hover {
5220
+ background-color: color-mix(
5221
+ in srgb,
5222
+ var(--color-danger-500) 15%,
5223
+ transparent
5224
+ );
5225
+ color: var(--color-danger-400);
5226
+ }
5227
+
5228
+ .dark .bc-file-input__clear-all-button {
5229
+ border-color: var(--color-base-600);
5230
+ background-color: var(--bg-surface);
5231
+ color: var(--color-base-400);
5232
+ }
5233
+
5234
+ .dark .bc-file-input__clear-all-button:hover {
5235
+ border-color: var(--color-danger-600);
5236
+ background-color: color-mix(
5237
+ in srgb,
5238
+ var(--color-danger-500) 15%,
5239
+ transparent
5240
+ );
5241
+ color: var(--color-danger-400);
5242
+ }
5243
+
5244
+ .dark .bc-base-input-container--error .bc-file-input__drop-zone {
5245
+ border-color: var(--color-danger-600);
5246
+ }
5247
+
5248
+ .dark .bc-base-input-container--error .bc-file-input__drop-zone:hover {
5249
+ border-color: var(--color-danger-500);
5250
+ background-color: color-mix(
5251
+ in srgb,
5252
+ var(--color-danger-500) 10%,
5253
+ transparent
5254
+ );
5255
+ }
5256
+
5257
+ .dark .bc-base-input-container--disabled .bc-file-input__drop-zone {
5258
+ border-color: var(--color-base-700);
5259
+ background-color: var(--color-base-800);
5260
+ }
5261
+
5262
+ .dark .bc-base-input-container--disabled .bc-file-input__drop-zone:hover {
5263
+ border-color: var(--color-base-700);
5264
+ background-color: var(--color-base-800);
5265
+ }
5266
+
5267
+ .dark .bc-base-input-container--disabled .bc-file-input__drop-zone-content {
5268
+ color: var(--color-base-600);
5269
+ }
5270
+
5271
+ .dark .bc-file-input__compact-placeholder {
5272
+ color: var(--color-base-400);
5273
+ }
5274
+
5275
+ .dark .bc-file-input__compact-value {
5276
+ color: var(--text-normal);
5277
+ }
5278
+
5279
+ .dark .bc-file-input__compact-value-item {
5280
+ background-color: var(--color-base-800);
5281
+ }
5282
+
5283
+ .dark .bc-file-input__compact-clear {
5284
+ color: var(--color-base-500);
5285
+ }
5286
+
5287
+ .dark .bc-file-input__compact-clear:hover {
5288
+ background-color: color-mix(
5289
+ in srgb,
5290
+ var(--color-danger-500) 15%,
5291
+ transparent
5292
+ );
5293
+ color: var(--color-danger-400);
5294
+ }
5295
+
5296
+ .dark .bc-file-input__compact-preview {
5297
+ background-color: var(--color-base-800);
5298
+ }
5299
+
5300
+ .dark .bc-file-input__compact-drop-zone {
5301
+ border-color: var(--color-base-600);
5302
+ }
5303
+
5304
+ .dark .bc-file-input__compact-drop-zone:hover {
5305
+ border-color: var(--color-primary-400);
5306
+ background-color: color-mix(
5307
+ in srgb,
5308
+ var(--color-primary-500) 10%,
5309
+ transparent
5310
+ );
5311
+ }
5312
+
5313
+ .dark .bc-file-input__compact-drop-zone .bc-file-input__compact-placeholder {
5314
+ color: var(--color-base-400);
5315
+ }
5316
+
5317
+ .dark .bc-file-input__compact-file-item {
5318
+ background-color: var(--color-base-800);
5319
+ }
5320
+
5321
+ .dark .bc-file-input__compact-file-item:hover {
5322
+ background-color: var(--color-base-700);
5323
+ }
5324
+
5325
+ .dark .bc-file-input__compact-file-name {
5326
+ color: var(--text-normal);
5327
+ }
5328
+
5329
+ .dark .bc-file-input__compact-file-meta {
5330
+ color: var(--color-base-400);
5331
+ }
5332
+
5333
+ .dark .bc-file-input__compact-remove-button {
5334
+ color: var(--color-base-500);
5335
+ }
5336
+
5337
+ .dark .bc-file-input__compact-remove-button:hover {
5338
+ background-color: color-mix(
5339
+ in srgb,
5340
+ var(--color-danger-500) 15%,
5341
+ transparent
5342
+ );
5343
+ color: var(--color-danger-400);
5344
+ }
5345
+
5346
+ .dark .bc-base-input-container--error .bc-file-input__compact-drop-zone {
5347
+ border-color: var(--color-danger-600);
5348
+ }
5349
+
5350
+ .dark .bc-base-input-container--error .bc-file-input__compact-drop-zone:hover {
5351
+ border-color: var(--color-danger-500);
5352
+ background-color: color-mix(
5353
+ in srgb,
5354
+ var(--color-danger-500) 10%,
5355
+ transparent
5356
+ );
5357
+ }
5358
+
5359
+ .dark .bc-base-input-container--disabled .bc-file-input__compact-drop-zone {
5360
+ border-color: var(--color-base-700);
5361
+ background-color: var(--color-base-800);
5362
+ }
5363
+
5364
+ .dark
5365
+ .bc-base-input-container--disabled
5366
+ .bc-file-input__compact-drop-zone:hover {
5367
+ border-color: var(--color-base-700);
5368
+ background-color: var(--color-base-800);
5369
+ }
5370
+
5153
5371
  .bc-flyout-container {
5154
5372
  z-index: var(--z-index-popover);
5155
5373
  }
@@ -5191,6 +5409,12 @@ a:focus-visible {
5191
5409
  pointer-events: auto;
5192
5410
  }
5193
5411
 
5412
+ /* Dark mode */
5413
+ .dark .bc-flyout {
5414
+ background-color: var(--color-base-800);
5415
+ border-color: var(--color-base-700);
5416
+ }
5417
+
5194
5418
  .bc-group {
5195
5419
  display: flex;
5196
5420
  flex-direction: row;
@@ -5417,30 +5641,30 @@ a:focus-visible {
5417
5641
  }
5418
5642
 
5419
5643
  /* Dark mode */
5420
- .b-dark .bc-history-timeline__filter {
5644
+ .dark .bc-history-timeline__filter {
5421
5645
  border-color: var(--color-base-600);
5422
5646
  color: var(--color-base-400);
5423
5647
  }
5424
5648
 
5425
- .b-dark .bc-history-timeline__filter:hover {
5649
+ .dark .bc-history-timeline__filter:hover {
5426
5650
  background: var(--color-base-700);
5427
5651
  }
5428
5652
 
5429
- .b-dark .bc-history-timeline__filter--active {
5653
+ .dark .bc-history-timeline__filter--active {
5430
5654
  background: rgba(37, 99, 235, 0.15);
5431
5655
  border-color: var(--color-primary-600);
5432
5656
  color: var(--color-primary-300);
5433
5657
  }
5434
5658
 
5435
- .b-dark .bc-history-timeline__line::after {
5659
+ .dark .bc-history-timeline__line::after {
5436
5660
  background: var(--color-base-700);
5437
5661
  }
5438
5662
 
5439
- .b-dark .bc-history-timeline__target {
5663
+ .dark .bc-history-timeline__target {
5440
5664
  color: var(--color-base-100);
5441
5665
  }
5442
5666
 
5443
- .b-dark .bc-history-timeline__avatar {
5667
+ .dark .bc-history-timeline__avatar {
5444
5668
  background: var(--color-primary-800);
5445
5669
  color: var(--color-primary-200);
5446
5670
  }
@@ -5455,7 +5679,7 @@ a:focus-visible {
5455
5679
  color: var(--icon-color, currentColor);
5456
5680
  }
5457
5681
 
5458
- .b-dark .bc-icon {
5682
+ .dark .bc-icon {
5459
5683
  color: var(--icon-color-dark, var(--icon-color, currentColor));
5460
5684
  }
5461
5685
 
@@ -5571,7 +5795,7 @@ a:focus-visible {
5571
5795
  }
5572
5796
 
5573
5797
  /* Dark mode */
5574
- .b-dark .bc-input-adornment--filled {
5798
+ .dark .bc-input-adornment--filled {
5575
5799
  background-color: var(--bg-subtle);
5576
5800
  }
5577
5801
 
@@ -5759,58 +5983,58 @@ a:focus-visible {
5759
5983
  }
5760
5984
 
5761
5985
  /* Dark mode styles */
5762
- .b-dark .bc-input-container--default {
5986
+ .dark .bc-input-container--default {
5763
5987
  background-color: var(--bg-surface);
5764
5988
  color: var(--text-normal);
5765
5989
  outline: 2px solid var(--border-default);
5766
5990
  }
5767
5991
 
5768
- .b-dark .bc-input-container--default:focus-within {
5992
+ .dark .bc-input-container--default:focus-within {
5769
5993
  outline: 2px solid var(--interactive-focus);
5770
5994
  background-color: var(--bg-elevated);
5771
5995
  }
5772
5996
 
5773
- .b-dark .bc-input-container::placeholder,
5774
- .b-dark .bc-base-input-container::placeholder {
5997
+ .dark .bc-input-container::placeholder,
5998
+ .dark .bc-base-input-container::placeholder {
5775
5999
  color: var(--color-gray-500);
5776
6000
  }
5777
6001
 
5778
- .b-dark .bc-input-container--disabled {
6002
+ .dark .bc-input-container--disabled {
5779
6003
  background-color: var(--bg-subtle);
5780
6004
  outline: 2px solid var(--border-divider);
5781
6005
  opacity: 0.6;
5782
6006
  }
5783
6007
 
5784
- .b-dark .bc-input-container--error {
6008
+ .dark .bc-input-container--error {
5785
6009
  outline: 2px solid var(--color-danger-400);
5786
6010
  background-color: var(--color-danger-950);
5787
6011
  }
5788
6012
 
5789
- .b-dark .bc-input-container--error:focus-within {
6013
+ .dark .bc-input-container--error:focus-within {
5790
6014
  outline: 2px solid var(--color-danger-400);
5791
6015
  background-color: var(--color-danger-900);
5792
6016
  }
5793
6017
 
5794
- .b-dark .bc-input-container__password-toggle {
6018
+ .dark .bc-input-container__password-toggle {
5795
6019
  fill: var(--text-muted);
5796
6020
  }
5797
6021
 
5798
- .b-dark .bc-input-container__password-toggle:hover {
6022
+ .dark .bc-input-container__password-toggle:hover {
5799
6023
  background-color: var(--interactive-hover);
5800
6024
  fill: var(--text-normal);
5801
6025
  }
5802
6026
 
5803
6027
  /* Dark mode for nullable reset */
5804
- .b-dark .bc-input-container__reset {
6028
+ .dark .bc-input-container__reset {
5805
6029
  fill: var(--text-muted);
5806
6030
  }
5807
6031
 
5808
- .b-dark .bc-input-container__reset:hover:not(:disabled) {
6032
+ .dark .bc-input-container__reset:hover:not(:disabled) {
5809
6033
  background-color: var(--interactive-hover);
5810
6034
  fill: var(--text-normal);
5811
6035
  }
5812
6036
 
5813
- .b-dark .bc-input-container__reset:disabled {
6037
+ .dark .bc-input-container__reset:disabled {
5814
6038
  opacity: 0.3;
5815
6039
  }
5816
6040
 
@@ -5957,19 +6181,19 @@ a:focus-visible {
5957
6181
  }
5958
6182
 
5959
6183
  /* Dark mode styles */
5960
- .b-dark .bc-input-wrapper__label-text--default {
6184
+ .dark .bc-input-wrapper__label-text--default {
5961
6185
  color: var(--text-normal);
5962
6186
  }
5963
6187
 
5964
- .b-dark .bc-input-wrapper__label-text--error {
6188
+ .dark .bc-input-wrapper__label-text--error {
5965
6189
  color: var(--color-danger-300);
5966
6190
  }
5967
6191
 
5968
- .b-dark .bc-input-wrapper__required {
6192
+ .dark .bc-input-wrapper__required {
5969
6193
  color: var(--color-danger-400);
5970
6194
  }
5971
6195
 
5972
- .b-dark .bc-input-wrapper__error {
6196
+ .dark .bc-input-wrapper__error {
5973
6197
  color: var(--color-danger-400);
5974
6198
  }
5975
6199
 
@@ -5978,6 +6202,10 @@ a:focus-visible {
5978
6202
  padding-inline-start: calc(var(--spacing-base) * 2);
5979
6203
  }
5980
6204
 
6205
+ .dark .bc-json-schema-object {
6206
+ border-left-color: var(--color-base-700);
6207
+ }
6208
+
5981
6209
  .bc-schema-grid {
5982
6210
  display: grid;
5983
6211
  }
@@ -6121,7 +6349,7 @@ a:focus-visible {
6121
6349
  color: var(--color-neutral-700);
6122
6350
  }
6123
6351
 
6124
- .b-dark .bc-array-control__item-label {
6352
+ .dark .bc-array-control__item-label {
6125
6353
  color: var(--color-neutral-200);
6126
6354
  }
6127
6355
 
@@ -6138,11 +6366,11 @@ a:focus-visible {
6138
6366
  color: var(--color-success-600);
6139
6367
  }
6140
6368
 
6141
- .b-dark .bc-array-control__indicator--error {
6369
+ .dark .bc-array-control__indicator--error {
6142
6370
  color: var(--color-danger-400);
6143
6371
  }
6144
6372
 
6145
- .b-dark .bc-array-control__indicator--success {
6373
+ .dark .bc-array-control__indicator--success {
6146
6374
  color: var(--color-success-400);
6147
6375
  }
6148
6376
 
@@ -6159,11 +6387,11 @@ a:focus-visible {
6159
6387
  font-weight: var(--font-weight-medium);
6160
6388
  }
6161
6389
 
6162
- .b-dark .bc-array-control__summary--success {
6390
+ .dark .bc-array-control__summary--success {
6163
6391
  color: var(--color-success-300);
6164
6392
  }
6165
6393
 
6166
- .b-dark .bc-array-control__summary--error {
6394
+ .dark .bc-array-control__summary--error {
6167
6395
  color: var(--color-danger-300);
6168
6396
  }
6169
6397
 
@@ -6188,7 +6416,7 @@ a:focus-visible {
6188
6416
  flex-shrink: 1;
6189
6417
  }
6190
6418
 
6191
- .b-dark .bc-object-helpers__error {
6419
+ .dark .bc-object-helpers__error {
6192
6420
  color: var(--color-danger-400);
6193
6421
  }
6194
6422
 
@@ -6197,7 +6425,7 @@ a:focus-visible {
6197
6425
  font-size: var(--font-size-sm);
6198
6426
  }
6199
6427
 
6200
- .b-dark .bc-json-schema-form__error {
6428
+ .dark .bc-json-schema-form__error {
6201
6429
  color: var(--color-danger-400);
6202
6430
  }
6203
6431
 
@@ -6250,7 +6478,7 @@ a:focus-visible {
6250
6478
  color: var(--color-neutral-500);
6251
6479
  }
6252
6480
 
6253
- .b-dark .bc-json-schema-display__label {
6481
+ .dark .bc-json-schema-display__label {
6254
6482
  color: var(--color-neutral-400);
6255
6483
  }
6256
6484
 
@@ -6260,7 +6488,7 @@ a:focus-visible {
6260
6488
  font-weight: var(--font-weight-bold);
6261
6489
  }
6262
6490
 
6263
- .b-dark .bc-json-schema-display__required {
6491
+ .dark .bc-json-schema-display__required {
6264
6492
  color: var(--color-danger-400);
6265
6493
  }
6266
6494
 
@@ -6273,7 +6501,7 @@ a:focus-visible {
6273
6501
  font-weight: var(--font-weight-medium);
6274
6502
  }
6275
6503
 
6276
- .b-dark .bc-json-schema-display__deprecated {
6504
+ .dark .bc-json-schema-display__deprecated {
6277
6505
  color: var(--color-warning-300);
6278
6506
  background-color: var(--color-warning-900);
6279
6507
  }
@@ -6289,7 +6517,7 @@ a:focus-visible {
6289
6517
  color: var(--color-neutral-900);
6290
6518
  }
6291
6519
 
6292
- .b-dark .bc-json-schema-display__value {
6520
+ .dark .bc-json-schema-display__value {
6293
6521
  color: var(--color-neutral-100);
6294
6522
  }
6295
6523
 
@@ -6299,7 +6527,7 @@ a:focus-visible {
6299
6527
  font-style: italic;
6300
6528
  }
6301
6529
 
6302
- .b-dark .bc-json-schema-display__value--null {
6530
+ .dark .bc-json-schema-display__value--null {
6303
6531
  color: var(--color-neutral-500);
6304
6532
  }
6305
6533
 
@@ -6309,7 +6537,7 @@ a:focus-visible {
6309
6537
  font-style: italic;
6310
6538
  }
6311
6539
 
6312
- .b-dark .bc-json-schema-display__value--missing {
6540
+ .dark .bc-json-schema-display__value--missing {
6313
6541
  color: var(--color-danger-400);
6314
6542
  }
6315
6543
 
@@ -6319,7 +6547,7 @@ a:focus-visible {
6319
6547
  margin-left: calc(var(--spacing-base) * 1);
6320
6548
  }
6321
6549
 
6322
- .b-dark .bc-json-schema-display__value-context {
6550
+ .dark .bc-json-schema-display__value-context {
6323
6551
  color: var(--color-neutral-500);
6324
6552
  }
6325
6553
 
@@ -6334,11 +6562,11 @@ a:focus-visible {
6334
6562
  color: var(--color-primary-700);
6335
6563
  }
6336
6564
 
6337
- .b-dark .bc-json-schema-display__link {
6565
+ .dark .bc-json-schema-display__link {
6338
6566
  color: var(--color-primary-400);
6339
6567
  }
6340
6568
 
6341
- .b-dark .bc-json-schema-display__link:hover {
6569
+ .dark .bc-json-schema-display__link:hover {
6342
6570
  color: var(--color-primary-300);
6343
6571
  }
6344
6572
 
@@ -6358,7 +6586,7 @@ a:focus-visible {
6358
6586
  vertical-align: middle;
6359
6587
  }
6360
6588
 
6361
- .b-dark .bc-json-schema-display__color-swatch {
6589
+ .dark .bc-json-schema-display__color-swatch {
6362
6590
  border-color: var(--color-neutral-600);
6363
6591
  }
6364
6592
 
@@ -6382,7 +6610,7 @@ a:focus-visible {
6382
6610
  overflow-x: auto;
6383
6611
  }
6384
6612
 
6385
- .b-dark .bc-json-schema-display__pre {
6613
+ .dark .bc-json-schema-display__pre {
6386
6614
  background-color: var(--color-neutral-800);
6387
6615
  border-color: var(--color-neutral-700);
6388
6616
  }
@@ -6407,12 +6635,12 @@ a:focus-visible {
6407
6635
  background-color: var(--color-danger-100);
6408
6636
  }
6409
6637
 
6410
- .b-dark .bc-json-schema-display__boolean--true {
6638
+ .dark .bc-json-schema-display__boolean--true {
6411
6639
  color: var(--color-success-300);
6412
6640
  background-color: var(--color-success-900);
6413
6641
  }
6414
6642
 
6415
- .b-dark .bc-json-schema-display__boolean--false {
6643
+ .dark .bc-json-schema-display__boolean--false {
6416
6644
  color: var(--color-danger-300);
6417
6645
  background-color: var(--color-danger-900);
6418
6646
  }
@@ -6423,7 +6651,7 @@ a:focus-visible {
6423
6651
  padding-inline-start: calc(var(--spacing-base) * 2);
6424
6652
  }
6425
6653
 
6426
- .b-dark .bc-json-schema-display__object {
6654
+ .dark .bc-json-schema-display__object {
6427
6655
  border-left-color: var(--color-neutral-700);
6428
6656
  }
6429
6657
 
@@ -6434,7 +6662,7 @@ a:focus-visible {
6434
6662
  padding-inline-start: calc(var(--spacing-base) * 2);
6435
6663
  }
6436
6664
 
6437
- .b-dark .bc-json-schema-display__extra-property {
6665
+ .dark .bc-json-schema-display__extra-property {
6438
6666
  border-left-color: var(--color-warning-600);
6439
6667
  }
6440
6668
 
@@ -6465,7 +6693,7 @@ a:focus-visible {
6465
6693
  flex-shrink: 0;
6466
6694
  }
6467
6695
 
6468
- .b-dark .bc-json-schema-display__array-index {
6696
+ .dark .bc-json-schema-display__array-index {
6469
6697
  color: var(--color-neutral-500);
6470
6698
  }
6471
6699
 
@@ -6475,7 +6703,7 @@ a:focus-visible {
6475
6703
  font-style: italic;
6476
6704
  }
6477
6705
 
6478
- .b-dark .bc-json-schema-display__empty {
6706
+ .dark .bc-json-schema-display__empty {
6479
6707
  color: var(--color-neutral-500);
6480
6708
  }
6481
6709
 
@@ -6491,7 +6719,7 @@ a:focus-visible {
6491
6719
  margin-bottom: calc(var(--spacing-base) * 1);
6492
6720
  }
6493
6721
 
6494
- .b-dark .bc-json-schema-display__branch-label {
6722
+ .dark .bc-json-schema-display__branch-label {
6495
6723
  color: var(--color-primary-300);
6496
6724
  background-color: var(--color-primary-900);
6497
6725
  }
@@ -6501,7 +6729,7 @@ a:focus-visible {
6501
6729
  background-color: var(--color-warning-100);
6502
6730
  }
6503
6731
 
6504
- .b-dark .bc-json-schema-display__branch-label--ambiguous {
6732
+ .dark .bc-json-schema-display__branch-label--ambiguous {
6505
6733
  color: var(--color-warning-300);
6506
6734
  background-color: var(--color-warning-900);
6507
6735
  }
@@ -6511,7 +6739,7 @@ a:focus-visible {
6511
6739
  background-color: var(--color-danger-100);
6512
6740
  }
6513
6741
 
6514
- .b-dark .bc-json-schema-display__branch-label--no-match {
6742
+ .dark .bc-json-schema-display__branch-label--no-match {
6515
6743
  color: var(--color-danger-300);
6516
6744
  background-color: var(--color-danger-900);
6517
6745
  }
@@ -6568,25 +6796,25 @@ a:focus-visible {
6568
6796
  margin-left: calc(var(--spacing-base) * 1);
6569
6797
  }
6570
6798
 
6571
- .b-dark .bc-json-schema-display__mismatch--type-mismatch,
6572
- .b-dark .bc-json-schema-display__mismatch--missing-required {
6799
+ .dark .bc-json-schema-display__mismatch--type-mismatch,
6800
+ .dark .bc-json-schema-display__mismatch--missing-required {
6573
6801
  color: var(--color-danger-300);
6574
6802
  background-color: var(--color-danger-900);
6575
6803
  }
6576
6804
 
6577
- .b-dark .bc-json-schema-display__mismatch--extra-property,
6578
- .b-dark .bc-json-schema-display__mismatch--enum-mismatch,
6579
- .b-dark .bc-json-schema-display__mismatch--const-mismatch {
6805
+ .dark .bc-json-schema-display__mismatch--extra-property,
6806
+ .dark .bc-json-schema-display__mismatch--enum-mismatch,
6807
+ .dark .bc-json-schema-display__mismatch--const-mismatch {
6580
6808
  color: var(--color-warning-300);
6581
6809
  background-color: var(--color-warning-900);
6582
6810
  }
6583
6811
 
6584
- .b-dark .bc-json-schema-display__mismatch--constraint-violation {
6812
+ .dark .bc-json-schema-display__mismatch--constraint-violation {
6585
6813
  color: var(--color-danger-300);
6586
6814
  background-color: var(--color-danger-900);
6587
6815
  }
6588
6816
 
6589
- .b-dark .bc-json-schema-display__mismatch-indicator {
6817
+ .dark .bc-json-schema-display__mismatch-indicator {
6590
6818
  color: var(--color-danger-400);
6591
6819
  }
6592
6820
 
@@ -6991,6 +7219,76 @@ a:focus-visible {
6991
7219
  color: var(--color-warning-700);
6992
7220
  }
6993
7221
 
7222
+ /* Dark mode */
7223
+ .dark .bc-json-structure-object {
7224
+ border-left-color: var(--color-base-700);
7225
+ }
7226
+
7227
+ .dark .bc-json-structure-additional-property {
7228
+ border-color: var(--color-base-700);
7229
+ background: var(--color-base-800);
7230
+ }
7231
+
7232
+ .dark .bc-json-structure-map-entry-key {
7233
+ color: var(--color-base-300);
7234
+ }
7235
+
7236
+ .dark .bc-json-structure-tuple-label {
7237
+ color: var(--color-base-300);
7238
+ }
7239
+
7240
+ .dark .bc-json-structure-tuple-description {
7241
+ color: var(--color-base-400);
7242
+ }
7243
+
7244
+ .dark .bc-json-structure-tuple-element-header {
7245
+ color: var(--color-base-400);
7246
+ }
7247
+
7248
+ .dark .bc-json-structure-tuple-position {
7249
+ color: var(--color-base-400);
7250
+ }
7251
+
7252
+ .dark .bc-json-structure-description {
7253
+ color: var(--color-base-400);
7254
+ }
7255
+
7256
+ .dark .bc-json-structure-deprecated::before {
7257
+ color: var(--color-warning-400);
7258
+ background: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
7259
+ }
7260
+
7261
+ .dark .bc-json-structure-deprecated-badge {
7262
+ color: var(--color-warning-300);
7263
+ background: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
7264
+ }
7265
+
7266
+ .dark .bc-json-structure-const {
7267
+ background: var(--color-base-800);
7268
+ color: var(--color-base-300);
7269
+ }
7270
+
7271
+ .dark .bc-json-structure-readonly input,
7272
+ .dark .bc-json-structure-readonly select,
7273
+ .dark .bc-json-structure-readonly textarea {
7274
+ background: var(--color-base-800);
7275
+ }
7276
+
7277
+ .dark .bc-json-structure-placeholder {
7278
+ border-color: var(--color-base-600);
7279
+ background: var(--color-base-800);
7280
+ }
7281
+
7282
+ .dark .bc-json-structure-placeholder > span:first-child {
7283
+ color: var(--color-base-500);
7284
+ }
7285
+
7286
+ .dark .bc-json-structure-unknown {
7287
+ border-color: var(--color-warning-700);
7288
+ background: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
7289
+ color: var(--color-warning-300);
7290
+ }
7291
+
6994
7292
  /* Kbd (Keyboard Key) Component */
6995
7293
  .bc-kbd {
6996
7294
  display: inline-flex;
@@ -7000,13 +7298,10 @@ a:focus-visible {
7000
7298
  font-weight: var(--font-weight-medium);
7001
7299
  line-height: 1;
7002
7300
  border-radius: var(--radius-xs);
7003
- background-color: var(--bg-subtle);
7301
+ background-color: var(--bg-surface);
7004
7302
  color: var(--text-muted);
7005
- border: 1px solid var(--border-muted);
7006
- /* box-shadow:
7007
- 0 1px 0 0 var(--border-default),
7008
- 0 2px 3px 0 rgba(0, 0, 0, 0.08),
7009
- 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
7303
+ border: 1px solid var(--border-subtle);
7304
+ box-shadow: rgb(229, 229, 229) 0px 1px 0px;
7010
7305
  white-space: nowrap;
7011
7306
  vertical-align: middle;
7012
7307
  transition:
@@ -7034,7 +7329,7 @@ a:focus-visible {
7034
7329
  }
7035
7330
 
7036
7331
  /* Dark mode styles */
7037
- .b-dark .bc-kbd {
7332
+ .dark .bc-kbd {
7038
7333
  border-color: var(--border-default);
7039
7334
  box-shadow:
7040
7335
  0 1px 0 0 var(--border-default),
@@ -7083,11 +7378,11 @@ a:focus-visible {
7083
7378
  }
7084
7379
 
7085
7380
  /* Dark mode styles */
7086
- .b-dark .bc-label {
7381
+ .dark .bc-label {
7087
7382
  color: var(--text-normal);
7088
7383
  }
7089
7384
 
7090
- .b-dark .bc-label--danger {
7385
+ .dark .bc-label--danger {
7091
7386
  color: var(--color-danger-400);
7092
7387
  }
7093
7388
 
@@ -7356,7 +7651,7 @@ a:focus-visible {
7356
7651
  border-radius: var(--radius-xs, 0.25rem);
7357
7652
  }
7358
7653
 
7359
- .b-dark .bc-lexical-code {
7654
+ .dark .bc-lexical-code {
7360
7655
  background-color: var(--color-neutral-800);
7361
7656
  color: var(--color-neutral-200);
7362
7657
  }
@@ -7405,71 +7700,71 @@ a:focus-visible {
7405
7700
  color: var(--color-neutral-500);
7406
7701
  }
7407
7702
 
7408
- .b-dark .bc-lexical-li-checked::before {
7703
+ .dark .bc-lexical-li-checked::before {
7409
7704
  background-color: var(--color-primary-400);
7410
7705
  border-color: var(--color-primary-400);
7411
7706
  }
7412
7707
 
7413
- .b-dark .bc-lexical-li-unchecked::before {
7708
+ .dark .bc-lexical-li-unchecked::before {
7414
7709
  border-color: var(--color-neutral-600);
7415
7710
  }
7416
7711
 
7417
7712
  /* Dark mode styles */
7418
- .b-dark .bc-lexical-editor-container {
7713
+ .dark .bc-lexical-editor-container {
7419
7714
  background-color: var(--color-neutral-800);
7420
7715
  border-color: var(--color-neutral-700);
7421
7716
  }
7422
7717
 
7423
- .b-dark .bc-lexical-editor {
7718
+ .dark .bc-lexical-editor {
7424
7719
  background-color: var(--bg-surface);
7425
7720
  color: var(--text-normal);
7426
7721
  }
7427
7722
 
7428
- .b-dark .bc-lexical-editor-container:focus-within {
7723
+ .dark .bc-lexical-editor-container:focus-within {
7429
7724
  border-color: var(--color-primary-400);
7430
7725
  box-shadow: 0 0 0 2px var(--color-primary-900);
7431
7726
  }
7432
7727
 
7433
- .b-dark .bc-lexical-editor-container--error {
7728
+ .dark .bc-lexical-editor-container--error {
7434
7729
  border-color: var(--color-danger-400);
7435
7730
  }
7436
7731
 
7437
- .b-dark .bc-lexical-editor-container--error:focus-within {
7732
+ .dark .bc-lexical-editor-container--error:focus-within {
7438
7733
  border-color: var(--color-danger-400);
7439
7734
  box-shadow: 0 0 0 2px var(--color-danger-900);
7440
7735
  }
7441
7736
 
7442
- .b-dark .bc-lexical-editor--readonly {
7737
+ .dark .bc-lexical-editor--readonly {
7443
7738
  background-color: var(--color-neutral-900);
7444
7739
  }
7445
7740
 
7446
- .b-dark .bc-lexical-editor [data-lexical-placeholder] {
7741
+ .dark .bc-lexical-editor [data-lexical-placeholder] {
7447
7742
  color: var(--color-neutral-500);
7448
7743
  }
7449
7744
 
7450
- .b-dark .bc-lexical-editor blockquote {
7745
+ .dark .bc-lexical-editor blockquote {
7451
7746
  border-left-color: var(--color-neutral-600);
7452
7747
  }
7453
7748
 
7454
- .b-dark .bc-lexical-editor code {
7749
+ .dark .bc-lexical-editor code {
7455
7750
  background-color: var(--color-neutral-800);
7456
7751
  color: var(--color-neutral-200);
7457
7752
  }
7458
7753
 
7459
- .b-dark .bc-lexical-editor pre {
7754
+ .dark .bc-lexical-editor pre {
7460
7755
  background-color: var(--color-neutral-900);
7461
7756
  border-color: var(--color-neutral-700);
7462
7757
  }
7463
7758
 
7464
- .b-dark .bc-lexical-editor a {
7759
+ .dark .bc-lexical-editor a {
7465
7760
  color: var(--color-primary-400);
7466
7761
  }
7467
7762
 
7468
- .b-dark .bc-lexical-editor a:hover {
7763
+ .dark .bc-lexical-editor a:hover {
7469
7764
  color: var(--color-primary-300);
7470
7765
  }
7471
7766
 
7472
- .b-dark .bc-lexical-editor hr {
7767
+ .dark .bc-lexical-editor hr {
7473
7768
  border-top-color: var(--color-neutral-700);
7474
7769
  }
7475
7770
 
@@ -7542,7 +7837,7 @@ a:focus-visible {
7542
7837
  box-shadow: 0 0 0 3px var(--color-primary-100);
7543
7838
  }
7544
7839
 
7545
- .b-dark .bc-lexical-editor-container:focus-within {
7840
+ .dark .bc-lexical-editor-container:focus-within {
7546
7841
  box-shadow: 0 0 0 3px var(--color-primary-900);
7547
7842
  }
7548
7843
  }
@@ -7561,7 +7856,7 @@ a:focus-visible {
7561
7856
  flex-wrap: wrap;
7562
7857
  }
7563
7858
 
7564
- .b-dark .bc-lexical-toolbar {
7859
+ .dark .bc-lexical-toolbar {
7565
7860
  background-color: var(--color-neutral-800);
7566
7861
  }
7567
7862
 
@@ -7570,7 +7865,7 @@ a:focus-visible {
7570
7865
  border-bottom: 1px solid var(--color-neutral-200);
7571
7866
  }
7572
7867
 
7573
- .b-dark .bc-lexical-editor-container > .bc-lexical-toolbar {
7868
+ .dark .bc-lexical-editor-container > .bc-lexical-toolbar {
7574
7869
  border-bottom-color: var(--color-neutral-700);
7575
7870
  }
7576
7871
 
@@ -7580,7 +7875,7 @@ a:focus-visible {
7580
7875
  border-top: 1px solid var(--color-neutral-200);
7581
7876
  }
7582
7877
 
7583
- .b-dark .bc-lexical-toolbar--bottom {
7878
+ .dark .bc-lexical-toolbar--bottom {
7584
7879
  border-top-color: var(--color-neutral-700);
7585
7880
  }
7586
7881
 
@@ -7601,7 +7896,7 @@ a:focus-visible {
7601
7896
  cursor: pointer;
7602
7897
  }
7603
7898
 
7604
- .b-dark .bc-lexical-toolbar-select {
7899
+ .dark .bc-lexical-toolbar-select {
7605
7900
  border-color: var(--color-neutral-600);
7606
7901
  background-color: var(--color-neutral-700);
7607
7902
  color: var(--color-neutral-100);
@@ -7623,7 +7918,7 @@ a:focus-visible {
7623
7918
  background-color: var(--color-neutral-200);
7624
7919
  }
7625
7920
 
7626
- .b-dark .bc-lexical-toolbar-color:hover {
7921
+ .dark .bc-lexical-toolbar-color:hover {
7627
7922
  background-color: var(--color-neutral-600);
7628
7923
  }
7629
7924
 
@@ -7680,7 +7975,7 @@ a:focus-visible {
7680
7975
  animation: bc-floating-toolbar-enter 0.15s ease-out;
7681
7976
  }
7682
7977
 
7683
- .b-dark .bc-floating-toolbar {
7978
+ .dark .bc-floating-toolbar {
7684
7979
  background-color: var(--color-neutral-800);
7685
7980
  border-color: var(--color-neutral-700);
7686
7981
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
@@ -7713,7 +8008,7 @@ a:focus-visible {
7713
8008
  animation: bc-slash-palette-enter 0.12s ease-out;
7714
8009
  }
7715
8010
 
7716
- .b-dark .bc-slash-command-palette {
8011
+ .dark .bc-slash-command-palette {
7717
8012
  background-color: var(--color-neutral-800);
7718
8013
  border-color: var(--color-neutral-700);
7719
8014
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
@@ -7745,8 +8040,8 @@ a:focus-visible {
7745
8040
  background-color: var(--color-primary-50);
7746
8041
  }
7747
8042
 
7748
- .b-dark .bc-slash-command-palette__item:hover,
7749
- .b-dark .bc-slash-command-palette__item[aria-selected='true'] {
8043
+ .dark .bc-slash-command-palette__item:hover,
8044
+ .dark .bc-slash-command-palette__item[aria-selected='true'] {
7750
8045
  background-color: var(--color-primary-900);
7751
8046
  }
7752
8047
 
@@ -7771,7 +8066,7 @@ a:focus-visible {
7771
8066
  margin-bottom: 2px;
7772
8067
  }
7773
8068
 
7774
- .b-dark .bc-slash-command-palette__label {
8069
+ .dark .bc-slash-command-palette__label {
7775
8070
  color: var(--color-neutral-100);
7776
8071
  }
7777
8072
 
@@ -7792,7 +8087,7 @@ a:focus-visible {
7792
8087
  flex-shrink: 0;
7793
8088
  }
7794
8089
 
7795
- .b-dark .bc-slash-command-palette__category {
8090
+ .dark .bc-slash-command-palette__category {
7796
8091
  background-color: var(--color-neutral-700);
7797
8092
  color: var(--color-neutral-400);
7798
8093
  }
@@ -7846,13 +8141,13 @@ a:focus-visible {
7846
8141
  cursor: not-allowed;
7847
8142
  }
7848
8143
 
7849
- .b-dark .bc-block-handle__button {
8144
+ .dark .bc-block-handle__button {
7850
8145
  background-color: var(--color-neutral-800);
7851
8146
  border-color: var(--color-neutral-700);
7852
8147
  color: var(--color-neutral-500);
7853
8148
  }
7854
8149
 
7855
- .b-dark .bc-block-handle__button:hover {
8150
+ .dark .bc-block-handle__button:hover {
7856
8151
  background-color: var(--color-neutral-700);
7857
8152
  color: var(--color-neutral-300);
7858
8153
  border-color: var(--color-neutral-600);
@@ -7928,42 +8223,42 @@ a:focus-visible {
7928
8223
  }
7929
8224
 
7930
8225
  /* Dark mode styles */
7931
- .b-dark .bc-lexical-table-cell,
7932
- .b-dark .bc-lexical-table-cell-header {
8226
+ .dark .bc-lexical-table-cell,
8227
+ .dark .bc-lexical-table-cell-header {
7933
8228
  border-color: var(--color-neutral-700);
7934
8229
  }
7935
8230
 
7936
- .b-dark .bc-lexical-table-row {
8231
+ .dark .bc-lexical-table-row {
7937
8232
  border-bottom-color: var(--color-neutral-700);
7938
8233
  }
7939
8234
 
7940
- .b-dark .bc-lexical-table-cell-header {
8235
+ .dark .bc-lexical-table-cell-header {
7941
8236
  background-color: var(--color-neutral-800);
7942
8237
  }
7943
8238
 
7944
- .b-dark .bc-lexical-table-cell--selected {
8239
+ .dark .bc-lexical-table-cell--selected {
7945
8240
  background-color: var(--color-primary-900);
7946
8241
  outline-color: var(--color-primary-400);
7947
8242
  }
7948
8243
 
7949
- .b-dark .bc-table-context-menu {
8244
+ .dark .bc-table-context-menu {
7950
8245
  background-color: var(--color-neutral-800);
7951
8246
  border-color: var(--color-neutral-700);
7952
8247
  }
7953
8248
 
7954
- .b-dark .bc-table-menu-button {
8249
+ .dark .bc-table-menu-button {
7955
8250
  color: var(--color-neutral-100);
7956
8251
  }
7957
8252
 
7958
- .b-dark .bc-table-menu-button:hover:not(:disabled) {
8253
+ .dark .bc-table-menu-button:hover:not(:disabled) {
7959
8254
  background-color: var(--color-neutral-700);
7960
8255
  }
7961
8256
 
7962
- .b-dark .bc-table-menu-button:active:not(:disabled) {
8257
+ .dark .bc-table-menu-button:active:not(:disabled) {
7963
8258
  background-color: var(--color-neutral-600);
7964
8259
  }
7965
8260
 
7966
- .b-dark .bc-table-menu-separator {
8261
+ .dark .bc-table-menu-separator {
7967
8262
  background-color: var(--color-neutral-700);
7968
8263
  }
7969
8264
 
@@ -8104,97 +8399,97 @@ a:focus-visible {
8104
8399
  }
8105
8400
 
8106
8401
  /* Dark mode styles */
8107
- .b-dark .bc-lexical-code-block {
8402
+ .dark .bc-lexical-code-block {
8108
8403
  background-color: var(--color-neutral-900);
8109
8404
  border-color: var(--color-neutral-700);
8110
8405
  color: var(--color-neutral-100);
8111
8406
  }
8112
8407
 
8113
- .b-dark .bc-code-language-button {
8408
+ .dark .bc-code-language-button {
8114
8409
  background-color: var(--color-neutral-800);
8115
8410
  border-color: var(--color-neutral-600);
8116
8411
  color: var(--color-neutral-200);
8117
8412
  }
8118
8413
 
8119
- .b-dark .bc-code-language-button:hover:not(:disabled) {
8414
+ .dark .bc-code-language-button:hover:not(:disabled) {
8120
8415
  background-color: var(--color-neutral-700);
8121
8416
  border-color: var(--color-neutral-500);
8122
8417
  }
8123
8418
 
8124
- .b-dark .bc-code-language-dropdown {
8419
+ .dark .bc-code-language-dropdown {
8125
8420
  background-color: var(--color-neutral-800);
8126
8421
  border-color: var(--color-neutral-700);
8127
8422
  }
8128
8423
 
8129
- .b-dark .bc-code-language-option {
8424
+ .dark .bc-code-language-option {
8130
8425
  color: var(--color-neutral-100);
8131
8426
  }
8132
8427
 
8133
- .b-dark .bc-code-language-option:hover {
8428
+ .dark .bc-code-language-option:hover {
8134
8429
  background-color: var(--color-neutral-700);
8135
8430
  }
8136
8431
 
8137
- .b-dark .bc-code-language-option:active {
8432
+ .dark .bc-code-language-option:active {
8138
8433
  background-color: var(--color-neutral-600);
8139
8434
  }
8140
8435
 
8141
8436
  /* Syntax highlighting token colors (dark theme) */
8142
- .b-dark .bc-lexical-code-block .token.comment,
8143
- .b-dark .bc-lexical-code-block .token.prolog,
8144
- .b-dark .bc-lexical-code-block .token.doctype,
8145
- .b-dark .bc-lexical-code-block .token.cdata {
8437
+ .dark .bc-lexical-code-block .token.comment,
8438
+ .dark .bc-lexical-code-block .token.prolog,
8439
+ .dark .bc-lexical-code-block .token.doctype,
8440
+ .dark .bc-lexical-code-block .token.cdata {
8146
8441
  color: #8b949e;
8147
8442
  }
8148
8443
 
8149
- .b-dark .bc-lexical-code-block .token.punctuation {
8444
+ .dark .bc-lexical-code-block .token.punctuation {
8150
8445
  color: #c9d1d9;
8151
8446
  }
8152
8447
 
8153
- .b-dark .bc-lexical-code-block .token.property,
8154
- .b-dark .bc-lexical-code-block .token.tag,
8155
- .b-dark .bc-lexical-code-block .token.boolean,
8156
- .b-dark .bc-lexical-code-block .token.number,
8157
- .b-dark .bc-lexical-code-block .token.constant,
8158
- .b-dark .bc-lexical-code-block .token.symbol,
8159
- .b-dark .bc-lexical-code-block .token.deleted {
8448
+ .dark .bc-lexical-code-block .token.property,
8449
+ .dark .bc-lexical-code-block .token.tag,
8450
+ .dark .bc-lexical-code-block .token.boolean,
8451
+ .dark .bc-lexical-code-block .token.number,
8452
+ .dark .bc-lexical-code-block .token.constant,
8453
+ .dark .bc-lexical-code-block .token.symbol,
8454
+ .dark .bc-lexical-code-block .token.deleted {
8160
8455
  color: #79c0ff;
8161
8456
  }
8162
8457
 
8163
- .b-dark .bc-lexical-code-block .token.selector,
8164
- .b-dark .bc-lexical-code-block .token.attr-name,
8165
- .b-dark .bc-lexical-code-block .token.string,
8166
- .b-dark .bc-lexical-code-block .token.char,
8167
- .b-dark .bc-lexical-code-block .token.builtin,
8168
- .b-dark .bc-lexical-code-block .token.inserted {
8458
+ .dark .bc-lexical-code-block .token.selector,
8459
+ .dark .bc-lexical-code-block .token.attr-name,
8460
+ .dark .bc-lexical-code-block .token.string,
8461
+ .dark .bc-lexical-code-block .token.char,
8462
+ .dark .bc-lexical-code-block .token.builtin,
8463
+ .dark .bc-lexical-code-block .token.inserted {
8169
8464
  color: #a5d6ff;
8170
8465
  }
8171
8466
 
8172
- .b-dark .bc-lexical-code-block .token.operator,
8173
- .b-dark .bc-lexical-code-block .token.entity,
8174
- .b-dark .bc-lexical-code-block .token.url,
8175
- .b-dark .bc-lexical-code-block .language-css .token.string,
8176
- .b-dark .bc-lexical-code-block .style .token.string {
8467
+ .dark .bc-lexical-code-block .token.operator,
8468
+ .dark .bc-lexical-code-block .token.entity,
8469
+ .dark .bc-lexical-code-block .token.url,
8470
+ .dark .bc-lexical-code-block .language-css .token.string,
8471
+ .dark .bc-lexical-code-block .style .token.string {
8177
8472
  color: #ff7b72;
8178
8473
  }
8179
8474
 
8180
- .b-dark .bc-lexical-code-block .token.atrule,
8181
- .b-dark .bc-lexical-code-block .token.attr-value,
8182
- .b-dark .bc-lexical-code-block .token.keyword {
8475
+ .dark .bc-lexical-code-block .token.atrule,
8476
+ .dark .bc-lexical-code-block .token.attr-value,
8477
+ .dark .bc-lexical-code-block .token.keyword {
8183
8478
  color: #ff7b72;
8184
8479
  }
8185
8480
 
8186
- .b-dark .bc-lexical-code-block .token.function,
8187
- .b-dark .bc-lexical-code-block .token.class-name {
8481
+ .dark .bc-lexical-code-block .token.function,
8482
+ .dark .bc-lexical-code-block .token.class-name {
8188
8483
  color: #d2a8ff;
8189
8484
  }
8190
8485
 
8191
- .b-dark .bc-lexical-code-block .token.regex,
8192
- .b-dark .bc-lexical-code-block .token.important,
8193
- .b-dark .bc-lexical-code-block .token.variable {
8486
+ .dark .bc-lexical-code-block .token.regex,
8487
+ .dark .bc-lexical-code-block .token.important,
8488
+ .dark .bc-lexical-code-block .token.variable {
8194
8489
  color: #ffa657;
8195
8490
  }
8196
8491
 
8197
- .b-dark .bc-lexical-code-block .line-number {
8492
+ .dark .bc-lexical-code-block .line-number {
8198
8493
  color: var(--color-neutral-600);
8199
8494
  }
8200
8495
 
@@ -8284,11 +8579,11 @@ a:focus-visible {
8284
8579
  color: var(--link-hover-color);
8285
8580
  }
8286
8581
 
8287
- .b-dark .bc-link {
8582
+ .dark .bc-link {
8288
8583
  color: var(--link-color-dark);
8289
8584
  }
8290
8585
 
8291
- .b-dark .bc-link:hover {
8586
+ .dark .bc-link:hover {
8292
8587
  color: var(--link-hover-color-dark);
8293
8588
  }
8294
8589
 
@@ -8376,7 +8671,7 @@ a:focus-visible {
8376
8671
  }
8377
8672
 
8378
8673
  /* Dark mode styles */
8379
- .b-dark .bc-menu {
8674
+ .dark .bc-menu {
8380
8675
  background-color: var(--bg-surface);
8381
8676
  border-color: var(--border-default);
8382
8677
  }
@@ -8446,16 +8741,16 @@ a:focus-visible {
8446
8741
  }
8447
8742
 
8448
8743
  /* Dark mode menu item styles */
8449
- .b-dark .bc-menu-item:hover:not(.bc-menu-item--disabled) {
8744
+ .dark .bc-menu-item:hover:not(.bc-menu-item--disabled) {
8450
8745
  background-color: var(--interactive-hover);
8451
8746
  }
8452
8747
 
8453
- .b-dark .bc-menu-item--focused {
8748
+ .dark .bc-menu-item--focused {
8454
8749
  background-color: var(--color-primary-900);
8455
8750
  color: var(--color-primary-100);
8456
8751
  }
8457
8752
 
8458
- .b-dark .bc-menu-item:active:not(.bc-menu-item--disabled) {
8753
+ .dark .bc-menu-item:active:not(.bc-menu-item--disabled) {
8459
8754
  background-color: var(--interactive-active);
8460
8755
  }
8461
8756
 
@@ -8500,11 +8795,11 @@ a:focus-visible {
8500
8795
  }
8501
8796
 
8502
8797
  /* Dark mode separator styles */
8503
- .b-dark .bc-menu-separator {
8798
+ .dark .bc-menu-separator {
8504
8799
  border-color: var(--border-divider);
8505
8800
  }
8506
8801
 
8507
- .b-dark .bc-menu-separator__label {
8802
+ .dark .bc-menu-separator__label {
8508
8803
  background-color: var(--bg-surface);
8509
8804
  }
8510
8805
 
@@ -8627,7 +8922,7 @@ a:focus-visible {
8627
8922
  background-color: var(--color-base-200);
8628
8923
  }
8629
8924
 
8630
- .b-dark .bc-menu-item:active {
8925
+ .dark .bc-menu-item:active {
8631
8926
  background-color: var(--interactive-active);
8632
8927
  }
8633
8928
  }
@@ -9080,41 +9375,41 @@ a:focus-visible {
9080
9375
  }
9081
9376
 
9082
9377
  /* Dark mode styles */
9083
- .b-dark .bc-modal {
9378
+ .dark .bc-modal {
9084
9379
  background-color: var(--bg-surface);
9085
9380
  border: 1px solid var(--border-default);
9086
9381
  color: var(--text-normal);
9087
9382
  }
9088
9383
 
9089
- .b-dark .bc-modal__header {
9384
+ .dark .bc-modal__header {
9090
9385
  border-bottom: 1px solid var(--border-divider);
9091
9386
  background-color: var(--bg-elevated);
9092
9387
  }
9093
9388
 
9094
- .b-dark .bc-modal__body {
9389
+ .dark .bc-modal__body {
9095
9390
  color: var(--text-normal);
9096
9391
  background-color: var(--bg-surface);
9097
9392
  }
9098
9393
 
9099
- .b-dark .bc-modal__footer {
9394
+ .dark .bc-modal__footer {
9100
9395
  border-top: 1px solid var(--border-divider);
9101
9396
  background-color: var(--bg-elevated);
9102
9397
  }
9103
9398
 
9104
- .b-dark .bc-modal__confirm-body {
9399
+ .dark .bc-modal__confirm-body {
9105
9400
  color: var(--color-base-400);
9106
9401
  }
9107
9402
 
9108
- .b-dark .bc-modal__confirm-consequences {
9403
+ .dark .bc-modal__confirm-consequences {
9109
9404
  background: var(--color-base-800);
9110
9405
  color: var(--color-base-400);
9111
9406
  }
9112
9407
 
9113
- .b-dark .bc-modal__confirm-consequences li::before {
9408
+ .dark .bc-modal__confirm-consequences li::before {
9114
9409
  color: var(--color-base-600);
9115
9410
  }
9116
9411
 
9117
- .b-dark .bc-modal--confirm .bc-modal__footer {
9412
+ .dark .bc-modal--confirm .bc-modal__footer {
9118
9413
  border-top: 1px solid var(--color-base-700);
9119
9414
  background: var(--color-base-800);
9120
9415
  }
@@ -9198,7 +9493,7 @@ a:focus-visible {
9198
9493
  color: var(--color-gray-700);
9199
9494
  }
9200
9495
 
9201
- .b-dark .bc-modal__title {
9496
+ .dark .bc-modal__title {
9202
9497
  color: var(--color-gray-200);
9203
9498
  }
9204
9499
 
@@ -9399,6 +9694,15 @@ a:focus-visible {
9399
9694
  transform: none;
9400
9695
  }
9401
9696
 
9697
+ /* Dark mode */
9698
+ .dark .bc-number-input-steppers-button {
9699
+ outline-color: var(--color-base-600);
9700
+ }
9701
+
9702
+ .dark .bc-number-input-steppers-button:hover {
9703
+ background-color: var(--color-base-700);
9704
+ }
9705
+
9402
9706
  /* export type OverlayEffect = 'transparent' | 'opaque'
9403
9707
  export type OverlayMode = 'capturing' | 'non-capturing' */
9404
9708
 
@@ -9439,12 +9743,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9439
9743
  }
9440
9744
 
9441
9745
  /* Dark mode styles */
9442
- .b-dark .bc-overlay--effect-transparent {
9746
+ .dark .bc-overlay--effect-transparent {
9443
9747
  background-color: color-mix(in srgb, var(--color-white) 2%, transparent);
9444
9748
  }
9445
9749
 
9446
- .b-dark .bc-overlay--effect-opaque[data-status='opened'],
9447
- .b-dark .bc-overlay--effect-opaque[data-status='opening'] {
9750
+ .dark .bc-overlay--effect-opaque[data-status='opened'],
9751
+ .dark .bc-overlay--effect-opaque[data-status='opening'] {
9448
9752
  background-color: color-mix(in srgb, var(--color-black) 80%, transparent);
9449
9753
  backdrop-filter: blur(4px);
9450
9754
  }
@@ -9461,7 +9765,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9461
9765
  }
9462
9766
 
9463
9767
  /* Dark mode */
9464
- .b-dark .bc-popover {
9768
+ .dark .bc-popover {
9465
9769
  background: var(--color-base-800);
9466
9770
  border-color: var(--color-base-700);
9467
9771
  color: var(--color-base-200);
@@ -9493,6 +9797,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9493
9797
  color: var(--color-gray-900);
9494
9798
  }
9495
9799
 
9800
+ .dark .bc-lightbox__close {
9801
+ background-color: color-mix(in srgb, var(--color-gray-800) 80%, transparent);
9802
+ color: var(--color-gray-100);
9803
+ }
9804
+
9496
9805
  .bc-lightbox__viewport {
9497
9806
  position: absolute;
9498
9807
  inset: 0;
@@ -9600,7 +9909,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9600
9909
  overflow: hidden;
9601
9910
  }
9602
9911
 
9603
- .b-dark .bc-panel {
9912
+ .dark .bc-panel {
9604
9913
  background-color: var(--panel-bg-dark);
9605
9914
  color: var(--panel-text-dark);
9606
9915
  }
@@ -9772,31 +10081,31 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9772
10081
  }
9773
10082
 
9774
10083
  /* Dark Mode Support */
9775
- .b-dark .bc-pagination__item {
10084
+ .dark .bc-pagination__item {
9776
10085
  color: var(--color-base-300);
9777
10086
  }
9778
10087
 
9779
- .b-dark .bc-pagination__item:hover:not(:disabled) {
10088
+ .dark .bc-pagination__item:hover:not(:disabled) {
9780
10089
  background-color: var(--color-base-700);
9781
10090
  color: var(--color-base-100);
9782
10091
  }
9783
10092
 
9784
- .b-dark .bc-pagination__item--active {
10093
+ .dark .bc-pagination__item--active {
9785
10094
  background-color: var(--color-primary-600);
9786
10095
  color: var(--color-white);
9787
10096
  }
9788
10097
 
9789
- .b-dark .bc-pagination__item--active:hover {
10098
+ .dark .bc-pagination__item--active:hover {
9790
10099
  background-color: var(--color-primary-600);
9791
10100
  color: var(--color-white);
9792
10101
  }
9793
10102
 
9794
- .b-dark .bc-pagination__item:disabled:hover {
10103
+ .dark .bc-pagination__item:disabled:hover {
9795
10104
  background: transparent;
9796
10105
  color: var(--color-base-300);
9797
10106
  }
9798
10107
 
9799
- .b-dark .bc-pagination__dots {
10108
+ .dark .bc-pagination__dots {
9800
10109
  color: var(--color-base-600);
9801
10110
  }
9802
10111
 
@@ -9839,7 +10148,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9839
10148
  overflow: hidden;
9840
10149
  }
9841
10150
 
9842
- .b-dark .bc-password-strength__bar {
10151
+ .dark .bc-password-strength__bar {
9843
10152
  background-color: var(--color-gray-700);
9844
10153
  }
9845
10154
 
@@ -9895,19 +10204,19 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9895
10204
  color: var(--color-success-600);
9896
10205
  }
9897
10206
 
9898
- .b-dark .bc-password-strength--weak .bc-password-strength__label {
10207
+ .dark .bc-password-strength--weak .bc-password-strength__label {
9899
10208
  color: var(--color-danger-400);
9900
10209
  }
9901
10210
 
9902
- .b-dark .bc-password-strength--fair .bc-password-strength__label {
10211
+ .dark .bc-password-strength--fair .bc-password-strength__label {
9903
10212
  color: var(--color-warning-400);
9904
10213
  }
9905
10214
 
9906
- .b-dark .bc-password-strength--good .bc-password-strength__label {
10215
+ .dark .bc-password-strength--good .bc-password-strength__label {
9907
10216
  color: var(--color-info-400);
9908
10217
  }
9909
10218
 
9910
- .b-dark .bc-password-strength--strong .bc-password-strength__label {
10219
+ .dark .bc-password-strength--strong .bc-password-strength__label {
9911
10220
  color: var(--color-success-400);
9912
10221
  }
9913
10222
 
@@ -9933,7 +10242,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9933
10242
  color: var(--color-success-600);
9934
10243
  }
9935
10244
 
9936
- .b-dark .bc-password-strength__requirement--met {
10245
+ .dark .bc-password-strength__requirement--met {
9937
10246
  color: var(--color-success-400);
9938
10247
  }
9939
10248
 
@@ -9957,7 +10266,7 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
9957
10266
  overflow: hidden;
9958
10267
  }
9959
10268
 
9960
- .b-dark .bc-password-strength-bar {
10269
+ .dark .bc-password-strength-bar {
9961
10270
  background-color: var(--color-gray-700);
9962
10271
  }
9963
10272
 
@@ -10008,19 +10317,19 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10008
10317
  color: var(--color-success-600);
10009
10318
  }
10010
10319
 
10011
- .b-dark .bc-password-strength-text--weak {
10320
+ .dark .bc-password-strength-text--weak {
10012
10321
  color: var(--color-danger-400);
10013
10322
  }
10014
10323
 
10015
- .b-dark .bc-password-strength-text--fair {
10324
+ .dark .bc-password-strength-text--fair {
10016
10325
  color: var(--color-warning-400);
10017
10326
  }
10018
10327
 
10019
- .b-dark .bc-password-strength-text--good {
10328
+ .dark .bc-password-strength-text--good {
10020
10329
  color: var(--color-info-400);
10021
10330
  }
10022
10331
 
10023
- .b-dark .bc-password-strength-text--strong {
10332
+ .dark .bc-password-strength-text--strong {
10024
10333
  color: var(--color-success-400);
10025
10334
  }
10026
10335
 
@@ -10031,8 +10340,8 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10031
10340
  border: 1px solid var(--border-default);
10032
10341
  }
10033
10342
 
10034
- .b-dark .bc-password-strength__bar,
10035
- .b-dark .bc-password-strength-bar {
10343
+ .dark .bc-password-strength__bar,
10344
+ .dark .bc-password-strength-bar {
10036
10345
  border-color: var(--border-default);
10037
10346
  }
10038
10347
  }
@@ -10210,11 +10519,11 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10210
10519
  }
10211
10520
 
10212
10521
  /* Dark mode styles */
10213
- .b-dark .bc-progress-bar__track {
10522
+ .dark .bc-progress-bar__track {
10214
10523
  background-color: var(--progress-track-dark);
10215
10524
  }
10216
10525
 
10217
- .b-dark .bc-progress-bar__fill {
10526
+ .dark .bc-progress-bar__fill {
10218
10527
  background-color: var(--progress-fill-dark);
10219
10528
  }
10220
10529
 
@@ -10354,20 +10663,20 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10354
10663
  }
10355
10664
 
10356
10665
  /* Dark mode styles */
10357
- .b-dark .bc-scrollable-panel__body::-webkit-scrollbar-track {
10666
+ .dark .bc-scrollable-panel__body::-webkit-scrollbar-track {
10358
10667
  background: var(--bg-subtle);
10359
10668
  }
10360
10669
 
10361
- .b-dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb {
10670
+ .dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb {
10362
10671
  background: var(--bg-raised);
10363
10672
  border-radius: var(--radius-sm);
10364
10673
  }
10365
10674
 
10366
- .b-dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
10675
+ .dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
10367
10676
  background: var(--bg-overlay);
10368
10677
  }
10369
10678
 
10370
- .b-dark .bc-scrollable-panel__body {
10679
+ .dark .bc-scrollable-panel__body {
10371
10680
  scrollbar-color: var(--bg-raised) var(--bg-subtle);
10372
10681
  }
10373
10682
 
@@ -10500,12 +10809,12 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10500
10809
  }
10501
10810
 
10502
10811
  /* Dark mode styles */
10503
- .b-dark .bc-segmented-input {
10812
+ .dark .bc-segmented-input {
10504
10813
  background-color: var(--bg-subtle);
10505
10814
  border: 1px solid var(--border-default);
10506
10815
  }
10507
10816
 
10508
- .b-dark .bc-segmented-input__indicator {
10817
+ .dark .bc-segmented-input__indicator {
10509
10818
  background-color: var(--si-indicator-bg-dark, var(--bg-elevated));
10510
10819
  box-shadow: var(
10511
10820
  --shadow-segmented-control-indicator-dark,
@@ -10514,49 +10823,49 @@ export type OverlayMode = 'capturing' | 'non-capturing' */
10514
10823
  );
10515
10824
  }
10516
10825
 
10517
- .b-dark .bc-segmented-input__segment {
10826
+ .dark .bc-segmented-input__segment {
10518
10827
  transition: all
10519
10828
  var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
10520
10829
  var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
10521
10830
  border-radius: var(--radius-full);
10522
10831
  }
10523
10832
 
10524
- .b-dark .bc-segmented-input--squared .bc-segmented-input__segment {
10833
+ .dark .bc-segmented-input--squared .bc-segmented-input__segment {
10525
10834
  border-radius: var(--radius-control-sm, var(--radius-sm));
10526
10835
  }
10527
10836
 
10528
- .b-dark .bc-segmented-input__segment:hover {
10837
+ .dark .bc-segmented-input__segment:hover {
10529
10838
  color: var(--text-normal);
10530
10839
  background-color: var(--interactive-hover);
10531
10840
  }
10532
10841
 
10533
- .b-dark .bc-segmented-input__segment--active,
10534
- .b-dark .bc-segmented-input__segment--active:hover {
10842
+ .dark .bc-segmented-input__segment--active,
10843
+ .dark .bc-segmented-input__segment--active:hover {
10535
10844
  color: var(--si-active-text-dark, var(--text-normal));
10536
10845
  background: transparent;
10537
10846
  }
10538
10847
 
10539
- .b-dark .bc-segmented-input__segment--inactive:hover {
10848
+ .dark .bc-segmented-input__segment--inactive:hover {
10540
10849
  color: var(--text-normal);
10541
10850
  }
10542
10851
 
10543
10852
  /* Disabled state (dark) */
10544
- .b-dark .bc-segmented-input--disabled {
10853
+ .dark .bc-segmented-input--disabled {
10545
10854
  background-color: var(--bg-background);
10546
10855
  border: 1px solid var(--border-divider);
10547
10856
  opacity: 0.5;
10548
10857
  }
10549
10858
 
10550
- .b-dark .bc-segmented-input--disabled .bc-segmented-input__indicator {
10859
+ .dark .bc-segmented-input--disabled .bc-segmented-input__indicator {
10551
10860
  background-color: var(--bg-subtle);
10552
10861
  box-shadow: var(--shadow-none, none);
10553
10862
  }
10554
10863
 
10555
- .b-dark .bc-segmented-input--disabled .bc-segmented-input__segment {
10864
+ .dark .bc-segmented-input--disabled .bc-segmented-input__segment {
10556
10865
  cursor: not-allowed;
10557
10866
  }
10558
10867
 
10559
- .b-dark .bc-segmented-input--disabled .bc-segmented-input__segment:hover {
10868
+ .dark .bc-segmented-input--disabled .bc-segmented-input__segment:hover {
10560
10869
  background-color: transparent;
10561
10870
  }
10562
10871
 
@@ -10674,7 +10983,7 @@ span.bc-sidebar-link {
10674
10983
  }
10675
10984
 
10676
10985
  /* Dark mode styles */
10677
- .b-dark span.bc-sidebar-link {
10986
+ .dark span.bc-sidebar-link {
10678
10987
  color: var(--color-primary-200);
10679
10988
  }
10680
10989
 
@@ -10711,7 +11020,7 @@ span.bc-sidebar-link {
10711
11020
  }
10712
11021
 
10713
11022
  /* Dark background mode in dark theme - inverted back to light colors */
10714
- .b-dark .bc-sidebar--dark-bg span.bc-sidebar-link {
11023
+ .dark .bc-sidebar--dark-bg span.bc-sidebar-link {
10715
11024
  color: var(--color-primary-700);
10716
11025
  }
10717
11026
 
@@ -10805,28 +11114,28 @@ span.bc-sidebar-link {
10805
11114
  }
10806
11115
 
10807
11116
  /* Dark mode styles */
10808
- .b-dark .bc-sink {
11117
+ .dark .bc-sink {
10809
11118
  background-color: var(--bg-background);
10810
11119
  border: 1px solid var(--border-default);
10811
11120
  box-shadow: var(--shadow-sink-dark, inset 0 2px 4px var(--shadow-color-dark));
10812
11121
  color: var(--text-normal);
10813
11122
  }
10814
11123
 
10815
- .b-dark .bc-sink--deep {
11124
+ .dark .bc-sink--deep {
10816
11125
  box-shadow: var(
10817
11126
  --shadow-sink-dark-deep,
10818
11127
  inset 0 4px 8px var(--shadow-color-dark)
10819
11128
  );
10820
11129
  }
10821
11130
 
10822
- .b-dark .bc-sink--shallow {
11131
+ .dark .bc-sink--shallow {
10823
11132
  box-shadow: var(
10824
11133
  --shadow-sink-dark-shallow,
10825
11134
  inset 0 1px 2px var(--shadow-color-dark)
10826
11135
  );
10827
11136
  }
10828
11137
 
10829
- .b-dark .bc-sink--flat {
11138
+ .dark .bc-sink--flat {
10830
11139
  box-shadow: var(--shadow-sink-dark-flat, none);
10831
11140
  border: 1px solid var(--border-divider);
10832
11141
  background-color: var(--bg-subtle);
@@ -10902,7 +11211,7 @@ span.bc-sidebar-link {
10902
11211
  }
10903
11212
 
10904
11213
  /* Dark mode styles */
10905
- .b-dark .bc-skeleton {
11214
+ .dark .bc-skeleton {
10906
11215
  --skeleton-bg: oklch(0.25 0 0);
10907
11216
  --skeleton-shimmer: oklch(0.3 0 0);
10908
11217
  }
@@ -11055,22 +11364,22 @@ span.bc-sidebar-link {
11055
11364
  }
11056
11365
 
11057
11366
  /* Dark mode styles */
11058
- .b-dark .bc-tag {
11367
+ .dark .bc-tag {
11059
11368
  background-color: var(--tag-bg-dark);
11060
11369
  color: var(--tag-text-dark);
11061
11370
  border-color: var(--tag-border-dark);
11062
11371
  }
11063
11372
 
11064
- .b-dark .bc-tag:hover {
11373
+ .dark .bc-tag:hover {
11065
11374
  background-color: var(--tag-bg-hover-dark);
11066
11375
  color: var(--tag-text-hover-dark);
11067
11376
  }
11068
11377
 
11069
- .b-dark .bc-tag__close {
11378
+ .dark .bc-tag__close {
11070
11379
  color: var(--tag-text-dark);
11071
11380
  }
11072
11381
 
11073
- .b-dark .bc-tag__close:hover:not(:disabled) {
11382
+ .dark .bc-tag__close:hover:not(:disabled) {
11074
11383
  color: var(--tag-text-dark);
11075
11384
  border-color: color-mix(in srgb, var(--tag-text-dark) 30%, transparent);
11076
11385
  }
@@ -11138,11 +11447,9 @@ span.bc-sidebar-link {
11138
11447
  display: grid;
11139
11448
  grid-template-areas: 'stack';
11140
11449
  border-radius: var(--radius-full);
11141
- box-shadow: var(
11142
- --shadow-switch-track,
11143
- inset 0 0 calc(var(--spacing-base))
11144
- color-mix(in srgb, var(--color-black) 20%, transparent)
11145
- );
11450
+ box-shadow:
11451
+ inset 0 1px 3px 0 color-mix(in srgb, var(--color-black) 10%, transparent),
11452
+ inset 0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent);
11146
11453
  transition: background-color var(--motion-transition-fast)
11147
11454
  var(--motion-easing-standard);
11148
11455
  cursor: pointer;
@@ -11220,9 +11527,9 @@ span.bc-sidebar-link {
11220
11527
  /* Switch thumb/handle */
11221
11528
  .bc-switch__thumb {
11222
11529
  grid-area: stack;
11530
+ position: relative;
11223
11531
  width: calc(var(--spacing-base) * 4); /* 16px equivalent */
11224
11532
  height: calc(var(--spacing-base) * 4);
11225
- /* margin-top: calc(var(--spacing-base) / 2); */
11226
11533
  border-radius: var(--radius-full);
11227
11534
  background-color: var(--color-white);
11228
11535
  box-shadow: var(
@@ -11231,16 +11538,26 @@ span.bc-sidebar-link {
11231
11538
  0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent)
11232
11539
  );
11233
11540
  z-index: 1;
11234
- transition: transform var(--motion-transition-fast)
11235
- var(--motion-easing-standard);
11541
+ inset-inline-start: 0;
11542
+ transition: inset-inline-start var(--motion-duration-fast, 120ms)
11543
+ cubic-bezier(0.2, 0, 0, 1);
11236
11544
  pointer-events: none;
11237
11545
  }
11238
11546
 
11547
+ /* Thumb position when on — uses inset-inline-start so RTL is handled
11548
+ automatically via the logical property. calc(100% - thumbWidth) moves
11549
+ the thumb to the far end of the grid area regardless of track width. */
11550
+ .bc-switch__thumb--on {
11551
+ inset-inline-start: calc(100% - var(--spacing-base) * 4);
11552
+ }
11553
+
11239
11554
  /* Size variants for track and thumb */
11240
11555
  .bc-switch--xs .bc-switch__thumb {
11241
11556
  width: calc(var(--spacing-base) * 3); /* 12px equivalent */
11242
11557
  height: calc(var(--spacing-base) * 3);
11243
- /* margin-top: calc(var(--spacing-base) / 1); */
11558
+ }
11559
+ .bc-switch--xs .bc-switch__thumb--on {
11560
+ inset-inline-start: calc(100% - var(--spacing-base) * 3);
11244
11561
  }
11245
11562
  .bc-switch--xs .bc-switch__track-label--off {
11246
11563
  padding-inline-end: var(--spacing-base);
@@ -11257,7 +11574,9 @@ span.bc-sidebar-link {
11257
11574
  .bc-switch--sm .bc-switch__thumb {
11258
11575
  width: calc(var(--spacing-base) * 3.5); /* 14px equivalent */
11259
11576
  height: calc(var(--spacing-base) * 3.5);
11260
- /* margin-top: calc(var(--spacing-base) / 1); */
11577
+ }
11578
+ .bc-switch--sm .bc-switch__thumb--on {
11579
+ inset-inline-start: calc(100% - var(--spacing-base) * 3.5);
11261
11580
  }
11262
11581
  .bc-switch--sm .bc-switch__track-label--off {
11263
11582
  padding-inline-end: var(--spacing-base);
@@ -11274,7 +11593,9 @@ span.bc-sidebar-link {
11274
11593
  .bc-switch--md .bc-switch__thumb {
11275
11594
  width: calc(var(--spacing-base) * 4); /* 20px equivalent */
11276
11595
  height: calc(var(--spacing-base) * 4);
11277
- /* margin-top: calc(var(--spacing-base) / 1); */
11596
+ }
11597
+ .bc-switch--md .bc-switch__thumb--on {
11598
+ inset-inline-start: calc(100% - var(--spacing-base) * 4);
11278
11599
  }
11279
11600
  .bc-switch--md .bc-switch__track-label--off {
11280
11601
  padding-inline-end: var(--spacing-base);
@@ -11291,7 +11612,9 @@ span.bc-sidebar-link {
11291
11612
  .bc-switch--lg .bc-switch__thumb {
11292
11613
  width: calc(var(--spacing-base) * 5); /* 20px equivalent */
11293
11614
  height: calc(var(--spacing-base) * 5);
11294
- /* margin-top: calc(var(--spacing-base) / 1); */
11615
+ }
11616
+ .bc-switch--lg .bc-switch__thumb--on {
11617
+ inset-inline-start: calc(100% - var(--spacing-base) * 5);
11295
11618
  }
11296
11619
  .bc-switch--lg .bc-switch__track-label--off {
11297
11620
  padding-inline-end: var(--spacing-base);
@@ -11308,7 +11631,9 @@ span.bc-sidebar-link {
11308
11631
  .bc-switch--xl .bc-switch__thumb {
11309
11632
  width: calc(var(--spacing-base) * 6); /* 24px equivalent */
11310
11633
  height: calc(var(--spacing-base) * 6);
11311
- /* margin-top: calc(var(--spacing-base) / 1); */
11634
+ }
11635
+ .bc-switch--xl .bc-switch__thumb--on {
11636
+ inset-inline-start: calc(100% - var(--spacing-base) * 6);
11312
11637
  }
11313
11638
  .bc-switch--xl .bc-switch__track-label--off {
11314
11639
  padding-inline-end: var(--spacing-base);
@@ -11353,25 +11678,25 @@ span.bc-sidebar-link {
11353
11678
  }
11354
11679
 
11355
11680
  /* Dark mode styles */
11356
- .b-dark .bc-switch__label {
11681
+ .dark .bc-switch__label {
11357
11682
  color: var(--text-normal);
11358
11683
  }
11359
11684
 
11360
- .b-dark .bc-switch__track--off {
11685
+ .dark .bc-switch__track--off {
11361
11686
  background-color: var(--bg-subtle);
11362
11687
  border: 1px solid var(--border-default);
11363
11688
  }
11364
11689
 
11365
- .b-dark .bc-switch__track--on {
11690
+ .dark .bc-switch__track--on {
11366
11691
  background-color: var(--switch-track-on-bg-dark, var(--color-primary-600));
11367
11692
  border: 1px solid var(--switch-track-on-border-dark, var(--color-primary-500));
11368
11693
  }
11369
11694
 
11370
- .b-dark .bc-switch__track-label--on {
11695
+ .dark .bc-switch__track-label--on {
11371
11696
  color: var(--switch-track-on-label-dark, var(--text-normal));
11372
11697
  }
11373
11698
 
11374
- .b-dark .bc-switch__thumb {
11699
+ .dark .bc-switch__thumb {
11375
11700
  background-color: var(--text-normal);
11376
11701
  box-shadow: var(--shadow-switch-thumb-dark, var(--shadow-md));
11377
11702
  }
@@ -11570,7 +11895,7 @@ span.bc-sidebar-link {
11570
11895
  }
11571
11896
 
11572
11897
  /* Dark mode styles */
11573
- .b-dark .bc-table-container {
11898
+ .dark .bc-table-container {
11574
11899
  --table-bg: var(--bg-background);
11575
11900
  --table-stripe-bg: var(--bg-surface);
11576
11901
  }
@@ -11794,30 +12119,30 @@ span.bc-sidebar-link {
11794
12119
  }
11795
12120
 
11796
12121
  /* Dark mode support */
11797
- .b-dark .bc-tabs__list {
12122
+ .dark .bc-tabs__list {
11798
12123
  background-color: var(--color-base-800);
11799
12124
  border-color: var(--color-base-700);
11800
12125
  }
11801
12126
 
11802
- .b-dark .bc-tab {
12127
+ .dark .bc-tab {
11803
12128
  color: var(--color-base-300);
11804
12129
  }
11805
12130
 
11806
- .b-dark .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
12131
+ .dark .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
11807
12132
  color: var(--color-base-100);
11808
12133
  background-color: var(--color-base-700);
11809
12134
  }
11810
12135
 
11811
- .b-dark .bc-tab--active {
12136
+ .dark .bc-tab--active {
11812
12137
  color: var(--color-primary-400);
11813
12138
  background-color: var(--color-base-900);
11814
12139
  }
11815
12140
 
11816
- .b-dark .bc-tab--disabled {
12141
+ .dark .bc-tab--disabled {
11817
12142
  color: var(--color-base-600);
11818
12143
  }
11819
12144
 
11820
- .b-dark .bc-tabs__panel {
12145
+ .dark .bc-tabs__panel {
11821
12146
  background-color: var(--color-base-900);
11822
12147
  }
11823
12148
 
@@ -11935,29 +12260,29 @@ span.bc-sidebar-link {
11935
12260
  }
11936
12261
 
11937
12262
  /* Dark mode adjustments for variants */
11938
- .b-dark .bc-tabs--variant-text .bc-tabs__list {
12263
+ .dark .bc-tabs--variant-text .bc-tabs__list {
11939
12264
  background-color: transparent;
11940
12265
  border-bottom: none;
11941
12266
  }
11942
- .b-dark .bc-tabs--variant-text .bc-tab {
12267
+ .dark .bc-tabs--variant-text .bc-tab {
11943
12268
  color: var(--color-primary-300);
11944
12269
  }
11945
- .b-dark .bc-tabs--variant-text .bc-tab--active {
12270
+ .dark .bc-tabs--variant-text .bc-tab--active {
11946
12271
  color: var(--color-primary-200);
11947
12272
  }
11948
12273
 
11949
- .b-dark .bc-tabs--variant-filled .bc-tab {
12274
+ .dark .bc-tabs--variant-filled .bc-tab {
11950
12275
  background-color: var(--tabs-filled-inactive-bg-dark);
11951
12276
  color: var(--tabs-filled-inactive-text-dark);
11952
12277
  }
11953
- .b-dark .bc-tabs--variant-filled .bc-tab--active {
12278
+ .dark .bc-tabs--variant-filled .bc-tab--active {
11954
12279
  background-color: var(--tabs-filled-active-bg-dark, var(--color-white));
11955
12280
  color: var(--tabs-filled-active-text-dark);
11956
12281
  }
11957
- .b-dark
12282
+ .dark
11958
12283
  .bc-tabs--variant-filled
11959
12284
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active),
11960
- .b-dark
12285
+ .dark
11961
12286
  .bc-tabs--variant-filled
11962
12287
  .bc-tab:focus-visible:not(.bc-tab--disabled):not(.bc-tab--active) {
11963
12288
  background-color: var(
@@ -11966,11 +12291,11 @@ span.bc-sidebar-link {
11966
12291
  );
11967
12292
  }
11968
12293
 
11969
- .b-dark .bc-tabs--variant-outline .bc-tab {
12294
+ .dark .bc-tabs--variant-outline .bc-tab {
11970
12295
  background-color: var(--color-base-800);
11971
12296
  border-color: var(--color-base-600);
11972
12297
  }
11973
- .b-dark .bc-tabs--variant-outline .bc-tab--active {
12298
+ .dark .bc-tabs--variant-outline .bc-tab--active {
11974
12299
  background-color: var(--color-base-900);
11975
12300
  border-color: var(--color-primary-600);
11976
12301
  border-bottom-color: var(--color-base-900);
@@ -12082,46 +12407,46 @@ span.bc-sidebar-link {
12082
12407
  }
12083
12408
 
12084
12409
  /* Dark mode adjustments for underline variant */
12085
- .b-dark .bc-tabs--variant-underline .bc-tabs__list {
12410
+ .dark .bc-tabs--variant-underline .bc-tabs__list {
12086
12411
  background-color: transparent;
12087
12412
  border-bottom-color: var(--color-base-700);
12088
12413
  }
12089
12414
 
12090
- .b-dark .bc-tabs--variant-underline .bc-tab {
12415
+ .dark .bc-tabs--variant-underline .bc-tab {
12091
12416
  color: var(--color-base-500);
12092
12417
  }
12093
12418
 
12094
- .b-dark
12419
+ .dark
12095
12420
  .bc-tabs--variant-underline
12096
12421
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
12097
12422
  color: var(--color-base-300);
12098
12423
  }
12099
12424
 
12100
- .b-dark .bc-tabs--variant-underline .bc-tab--active {
12425
+ .dark .bc-tabs--variant-underline .bc-tab--active {
12101
12426
  color: var(--color-primary-400);
12102
12427
  }
12103
12428
 
12104
- .b-dark .bc-tabs--variant-underline .bc-tab--active::after {
12429
+ .dark .bc-tabs--variant-underline .bc-tab--active::after {
12105
12430
  background-color: var(--color-primary-400);
12106
12431
  }
12107
12432
 
12108
12433
  /* Dark mode adjustments for pill variant */
12109
- .b-dark .bc-tabs--variant-pill .bc-tabs__list {
12434
+ .dark .bc-tabs--variant-pill .bc-tabs__list {
12110
12435
  background-color: var(--color-base-800);
12111
12436
  }
12112
12437
 
12113
- .b-dark .bc-tabs--variant-pill .bc-tab {
12438
+ .dark .bc-tabs--variant-pill .bc-tab {
12114
12439
  color: var(--color-base-500);
12115
12440
  }
12116
12441
 
12117
- .b-dark
12442
+ .dark
12118
12443
  .bc-tabs--variant-pill
12119
12444
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
12120
12445
  color: var(--color-base-300);
12121
12446
  background-color: var(--color-base-700);
12122
12447
  }
12123
12448
 
12124
- .b-dark .bc-tabs--variant-pill .bc-tab--active {
12449
+ .dark .bc-tabs--variant-pill .bc-tab--active {
12125
12450
  background-color: var(--color-base-900);
12126
12451
  color: var(--color-base-200);
12127
12452
  box-shadow: var(--shadow-sm);
@@ -12248,21 +12573,21 @@ span.bc-sidebar-link {
12248
12573
  }
12249
12574
 
12250
12575
  /* Dark mode */
12251
- .b-dark .bc-tag-input {
12576
+ .dark .bc-tag-input {
12252
12577
  background: var(--color-base-800);
12253
12578
  border-color: var(--color-base-600);
12254
12579
  }
12255
12580
 
12256
- .b-dark .bc-tag-input__tag {
12581
+ .dark .bc-tag-input__tag {
12257
12582
  background: var(--color-base-700);
12258
12583
  color: var(--color-base-200);
12259
12584
  }
12260
12585
 
12261
- .b-dark .bc-tag-input__tag-remove {
12586
+ .dark .bc-tag-input__tag-remove {
12262
12587
  color: var(--color-base-400);
12263
12588
  }
12264
12589
 
12265
- .b-dark .bc-tag-input__input {
12590
+ .dark .bc-tag-input__input {
12266
12591
  color: var(--color-base-100);
12267
12592
  }
12268
12593
 
@@ -12348,7 +12673,7 @@ span.bc-sidebar-link {
12348
12673
  }
12349
12674
 
12350
12675
  /* Dark theme adjustments */
12351
- .b-dark .bc-tooltip {
12676
+ .dark .bc-tooltip {
12352
12677
  background-color: var(--bg-elevated);
12353
12678
  color: var(--text-normal);
12354
12679
  border: 1px solid var(--border-default);
@@ -12359,7 +12684,7 @@ span.bc-sidebar-link {
12359
12684
  );
12360
12685
  }
12361
12686
 
12362
- .b-dark .bc-tooltip__arrow svg path {
12687
+ .dark .bc-tooltip__arrow svg path {
12363
12688
  fill: var(--bg-elevated);
12364
12689
  stroke: var(--border-default);
12365
12690
  stroke-width: 1;
@@ -12371,7 +12696,7 @@ span.bc-sidebar-link {
12371
12696
  border: 1px solid var(--color-neutral-600);
12372
12697
  }
12373
12698
 
12374
- .b-dark .bc-tooltip {
12699
+ .dark .bc-tooltip {
12375
12700
  border: 1px solid var(--color-neutral-400);
12376
12701
  }
12377
12702
  }
@@ -12395,7 +12720,7 @@ span.bc-sidebar-link {
12395
12720
  width: 100%;
12396
12721
  }
12397
12722
 
12398
- .b-dark .bc-toolbar {
12723
+ .dark .bc-toolbar {
12399
12724
  background-color: var(--color-neutral-800);
12400
12725
  border-color: var(--color-neutral-700);
12401
12726
  }
@@ -12413,7 +12738,7 @@ span.bc-sidebar-link {
12413
12738
  margin: 0 var(--spacing-xs);
12414
12739
  }
12415
12740
 
12416
- .b-dark .bc-toolbar__divider {
12741
+ .dark .bc-toolbar__divider {
12417
12742
  background-color: var(--color-neutral-600);
12418
12743
  }
12419
12744
 
@@ -12543,29 +12868,27 @@ span.bc-sidebar-link {
12543
12868
  }
12544
12869
 
12545
12870
  /* Dark mode */
12546
- .b-dark .bc-toolbar__group > .bc-toolbar__button.bc-button {
12871
+ .dark .bc-toolbar__group > .bc-toolbar__button.bc-button {
12547
12872
  color: var(--color-base-300);
12548
12873
  }
12549
12874
 
12550
- .b-dark
12551
- .bc-toolbar__group
12552
- > .bc-toolbar__button.bc-button:hover:not(:disabled) {
12875
+ .dark .bc-toolbar__group > .bc-toolbar__button.bc-button:hover:not(:disabled) {
12553
12876
  background-color: var(--color-base-700);
12554
12877
  color: var(--color-base-100);
12555
12878
  }
12556
12879
 
12557
- .b-dark .bc-toolbar__group > .bc-toolbar__button.bc-button[aria-pressed='true'],
12558
- .b-dark
12880
+ .dark .bc-toolbar__group > .bc-toolbar__button.bc-button[aria-pressed='true'],
12881
+ .dark
12559
12882
  .bc-toolbar__group
12560
12883
  > .bc-toolbar__button.bc-button.bc-toolbar__button--active {
12561
12884
  background-color: var(--color-primary-900);
12562
12885
  color: var(--color-primary-300);
12563
12886
  }
12564
12887
 
12565
- .b-dark
12888
+ .dark
12566
12889
  .bc-toolbar__group
12567
12890
  > .bc-toolbar__button.bc-button[aria-pressed='true']:hover:not(:disabled),
12568
- .b-dark
12891
+ .dark
12569
12892
  .bc-toolbar__group
12570
12893
  > .bc-toolbar__button.bc-button.bc-toolbar__button--active:hover:not(
12571
12894
  :disabled
@@ -12621,29 +12944,26 @@ span.bc-sidebar-link {
12621
12944
  }
12622
12945
 
12623
12946
  /* Dark mode for floating toolbar */
12624
- .b-dark .bc-toolbar--floating {
12947
+ .dark .bc-toolbar--floating {
12625
12948
  background: var(--color-base-800);
12626
12949
  border-color: var(--color-base-700);
12627
12950
  }
12628
12951
 
12629
- .b-dark .bc-toolbar--floating .bc-toolbar__button .bc-button {
12952
+ .dark .bc-toolbar--floating .bc-toolbar__button .bc-button {
12630
12953
  color: var(--color-base-300);
12631
12954
  }
12632
12955
 
12633
- .b-dark .bc-toolbar--floating .bc-toolbar__button .bc-button:hover {
12956
+ .dark .bc-toolbar--floating .bc-toolbar__button .bc-button:hover {
12634
12957
  background: var(--color-base-700);
12635
12958
  }
12636
12959
 
12637
- .b-dark
12638
- .bc-toolbar--floating
12639
- .bc-toolbar__button
12640
- .bc-button[aria-pressed='true'],
12641
- .b-dark .bc-toolbar--floating .bc-toolbar__button .bc-button.bc-button--active {
12960
+ .dark .bc-toolbar--floating .bc-toolbar__button .bc-button[aria-pressed='true'],
12961
+ .dark .bc-toolbar--floating .bc-toolbar__button .bc-button.bc-button--active {
12642
12962
  background: var(--color-primary-900);
12643
12963
  color: var(--color-primary-300);
12644
12964
  }
12645
12965
 
12646
- .b-dark .bc-toolbar--floating .bc-toolbar__divider {
12966
+ .dark .bc-toolbar--floating .bc-toolbar__divider {
12647
12967
  background: var(--color-base-700);
12648
12968
  }
12649
12969
 
@@ -12764,28 +13084,28 @@ span.bc-sidebar-link {
12764
13084
  }
12765
13085
 
12766
13086
  /* Dark mode */
12767
- .b-dark .bc-tree-item__row:hover {
13087
+ .dark .bc-tree-item__row:hover {
12768
13088
  background-color: oklch(0.25 0 0);
12769
13089
  }
12770
13090
 
12771
- .b-dark .bc-tree-item__row--selected {
13091
+ .dark .bc-tree-item__row--selected {
12772
13092
  background-color: oklch(0.25 0.03 250);
12773
13093
  color: oklch(0.75 0.12 250);
12774
13094
  }
12775
13095
 
12776
- .b-dark .bc-tree-item__toggle {
13096
+ .dark .bc-tree-item__toggle {
12777
13097
  color: var(--color-gray-400);
12778
13098
  }
12779
13099
 
12780
- .b-dark .bc-tree-item__toggle:hover {
13100
+ .dark .bc-tree-item__toggle:hover {
12781
13101
  color: var(--color-gray-200);
12782
13102
  }
12783
13103
 
12784
- .b-dark .bc-tree-item__icon {
13104
+ .dark .bc-tree-item__icon {
12785
13105
  color: var(--color-gray-400);
12786
13106
  }
12787
13107
 
12788
- .b-dark .bc-tree-item__badge {
13108
+ .dark .bc-tree-item__badge {
12789
13109
  background: oklch(0.25 0 0);
12790
13110
  color: var(--color-gray-300);
12791
13111
  }
@@ -12806,7 +13126,7 @@ span.bc-sidebar-link {
12806
13126
  outline-offset: -2px;
12807
13127
  }
12808
13128
 
12809
- .b-dark .bc-tree-item__row:focus-visible {
13129
+ .dark .bc-tree-item__row:focus-visible {
12810
13130
  outline-color: var(--color-primary-400);
12811
13131
  }
12812
13132
 
@@ -13051,29 +13371,29 @@ span.bc-sidebar-link {
13051
13371
  }
13052
13372
 
13053
13373
  /* Dark mode */
13054
- .b-dark .bc-radio-group__indicator {
13374
+ .dark .bc-radio-group__indicator {
13055
13375
  border-color: var(--border-default);
13056
13376
  background-color: var(--bg-surface);
13057
13377
  }
13058
13378
 
13059
- .b-dark .bc-radio-group__input:checked + .bc-radio-group__indicator {
13379
+ .dark .bc-radio-group__input:checked + .bc-radio-group__indicator {
13060
13380
  border-color: var(--color-primary-400);
13061
13381
  }
13062
13382
 
13063
- .b-dark .bc-radio-group__input:checked + .bc-radio-group__indicator::after {
13383
+ .dark .bc-radio-group__input:checked + .bc-radio-group__indicator::after {
13064
13384
  background-color: var(--color-primary-400);
13065
13385
  }
13066
13386
 
13067
- .b-dark .bc-radio-group__input:focus-visible + .bc-radio-group__indicator {
13387
+ .dark .bc-radio-group__input:focus-visible + .bc-radio-group__indicator {
13068
13388
  outline-color: var(--interactive-focus);
13069
13389
  }
13070
13390
 
13071
- .b-dark .bc-radio-group__input:disabled + .bc-radio-group__indicator {
13391
+ .dark .bc-radio-group__input:disabled + .bc-radio-group__indicator {
13072
13392
  border-color: var(--border-default);
13073
13393
  background-color: var(--bg-subtle);
13074
13394
  }
13075
13395
 
13076
- .b-dark
13396
+ .dark
13077
13397
  .bc-radio-group__input:disabled:checked
13078
13398
  + .bc-radio-group__indicator::after {
13079
13399
  background-color: var(--text-muted);
@@ -13173,6 +13493,67 @@ span.bc-sidebar-link {
13173
13493
  flex-shrink: 0;
13174
13494
  }
13175
13495
 
13496
+ /* Dark mode */
13497
+ .dark .bc-notice--tone-prominent {
13498
+ border-color: var(--color-base-700);
13499
+ }
13500
+
13501
+ .dark .bc-notice--tone-subtle {
13502
+ border-color: var(--color-base-700);
13503
+ }
13504
+
13505
+ .dark .bc-notice--info.bc-notice--tone-prominent {
13506
+ background-color: color-mix(in srgb, var(--color-info-500) 12%, transparent);
13507
+ border-color: var(--color-info-800);
13508
+ color: var(--color-info-200);
13509
+ }
13510
+
13511
+ .dark .bc-notice--success.bc-notice--tone-prominent {
13512
+ background-color: color-mix(
13513
+ in srgb,
13514
+ var(--color-success-500) 12%,
13515
+ transparent
13516
+ );
13517
+ border-color: var(--color-success-800);
13518
+ color: var(--color-success-200);
13519
+ }
13520
+
13521
+ .dark .bc-notice--warning.bc-notice--tone-prominent {
13522
+ background-color: color-mix(
13523
+ in srgb,
13524
+ var(--color-warning-500) 12%,
13525
+ transparent
13526
+ );
13527
+ border-color: var(--color-warning-800);
13528
+ color: var(--color-warning-200);
13529
+ }
13530
+
13531
+ .dark .bc-notice--danger.bc-notice--tone-prominent {
13532
+ background-color: color-mix(
13533
+ in srgb,
13534
+ var(--color-danger-500) 12%,
13535
+ transparent
13536
+ );
13537
+ border-color: var(--color-danger-800);
13538
+ color: var(--color-danger-200);
13539
+ }
13540
+
13541
+ .dark .bc-notice--info.bc-notice--tone-subtle {
13542
+ color: var(--color-info-300);
13543
+ }
13544
+
13545
+ .dark .bc-notice--success.bc-notice--tone-subtle {
13546
+ color: var(--color-success-300);
13547
+ }
13548
+
13549
+ .dark .bc-notice--warning.bc-notice--tone-subtle {
13550
+ color: var(--color-warning-300);
13551
+ }
13552
+
13553
+ .dark .bc-notice--danger.bc-notice--tone-subtle {
13554
+ color: var(--color-danger-300);
13555
+ }
13556
+
13176
13557
  @layer components {
13177
13558
  .bc-notification {
13178
13559
  --notification-accent-color: var(--color-primary-500);
@@ -13289,7 +13670,7 @@ span.bc-sidebar-link {
13289
13670
  align-items: flex-start;
13290
13671
  }
13291
13672
 
13292
- .b-dark .bc-notification {
13673
+ .dark .bc-notification {
13293
13674
  --notification-bg: var(--bg-surface);
13294
13675
  --notification-border-color: var(--color-base-700);
13295
13676
  }
@@ -13467,39 +13848,63 @@ span.bc-sidebar-link {
13467
13848
  }
13468
13849
 
13469
13850
  /* Dark mode */
13470
- .b-dark .bc-notification-panel {
13851
+ .dark .bc-notification-panel {
13471
13852
  background: var(--color-base-800);
13472
13853
  border-color: var(--color-base-700);
13473
13854
  }
13474
13855
 
13475
- .b-dark .bc-notification-panel__header {
13856
+ .dark .bc-notification-panel__header {
13476
13857
  border-color: var(--color-base-700);
13477
13858
  }
13478
13859
 
13479
- .b-dark .bc-notification-panel__header-title {
13860
+ .dark .bc-notification-panel__header-title {
13480
13861
  color: var(--color-base-100);
13481
13862
  }
13482
13863
 
13483
- .b-dark .bc-notification-panel__item:hover {
13864
+ .dark .bc-notification-panel__item:hover {
13484
13865
  background: var(--color-base-700);
13485
13866
  }
13486
13867
 
13487
- .b-dark .bc-notification-panel__item--unread {
13868
+ .dark .bc-notification-panel__item--unread {
13488
13869
  background: rgba(37, 99, 235, 0.08);
13489
13870
  }
13490
13871
 
13491
- .b-dark .bc-notification-panel__item-icon {
13872
+ .dark .bc-notification-panel__item-icon {
13492
13873
  background: var(--color-base-700);
13493
13874
  }
13494
13875
 
13495
- .b-dark .bc-notification-panel__item-title {
13876
+ .dark .bc-notification-panel__item-title {
13496
13877
  color: var(--color-base-100);
13497
13878
  }
13498
13879
 
13499
- .b-dark .bc-notification-panel__item-body {
13880
+ .dark .bc-notification-panel__item-body {
13500
13881
  color: var(--color-base-400);
13501
13882
  }
13502
13883
 
13884
+ .dark .bc-notification-panel__mark-read-btn {
13885
+ color: var(--color-primary-400);
13886
+ }
13887
+
13888
+ .dark .bc-notification-panel__close-btn {
13889
+ color: var(--color-base-500);
13890
+ }
13891
+
13892
+ .dark .bc-notification-panel__item-meta {
13893
+ color: var(--color-base-500);
13894
+ }
13895
+
13896
+ .dark .bc-notification-panel__item-source {
13897
+ color: var(--color-primary-400);
13898
+ }
13899
+
13900
+ .dark .bc-notification-panel__empty {
13901
+ color: var(--color-base-500);
13902
+ }
13903
+
13904
+ .dark .bc-notification-panel__item--unread:hover {
13905
+ background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
13906
+ }
13907
+
13503
13908
  /* Minimal optional controls for VideoPlayer wrapper */
13504
13909
 
13505
13910
  .bc-video-player {
@@ -13935,7 +14340,7 @@ span.bc-sidebar-link {
13935
14340
  text-align: center;
13936
14341
  }
13937
14342
 
13938
- .b-dark .bc-pdf-page-viewer__error-text {
14343
+ .dark .bc-pdf-page-viewer__error-text {
13939
14344
  color: var(--color-danger-400);
13940
14345
  }
13941
14346
 
@@ -14031,11 +14436,11 @@ span.bc-sidebar-link {
14031
14436
  }
14032
14437
 
14033
14438
  /* Dark mode */
14034
- .b-dark .bc-dialog__consequences li::before {
14439
+ .dark .bc-dialog__consequences li::before {
14035
14440
  color: var(--color-base-600);
14036
14441
  }
14037
14442
 
14038
- .b-dark .bc-dialog__icon {
14443
+ .dark .bc-dialog__icon {
14039
14444
  /* In dark mode, use shade 900 for bg and 400 for fg — applied via inline styles */
14040
14445
  }
14041
14446
 
@@ -14103,7 +14508,7 @@ span.bc-sidebar-link {
14103
14508
  }
14104
14509
 
14105
14510
  /* Dark mode overrides */
14106
- .b-dark .bc-ribbon {
14511
+ .dark .bc-ribbon {
14107
14512
  background: var(--ribbon-bg-dark);
14108
14513
  color: var(--ribbon-text-dark);
14109
14514
  }
@@ -14271,31 +14676,31 @@ span.bc-sidebar-link {
14271
14676
  }
14272
14677
 
14273
14678
  /* Dark mode */
14274
- .b-dark .bc-accordion--default {
14679
+ .dark .bc-accordion--default {
14275
14680
  border-color: var(--border-default);
14276
14681
  }
14277
14682
 
14278
- .b-dark .bc-accordion--default .bc-accordion__item + .bc-accordion__item {
14683
+ .dark .bc-accordion--default .bc-accordion__item + .bc-accordion__item {
14279
14684
  border-top-color: var(--border-default);
14280
14685
  }
14281
14686
 
14282
- .b-dark .bc-accordion--separated .bc-accordion__item {
14687
+ .dark .bc-accordion--separated .bc-accordion__item {
14283
14688
  border-color: var(--border-default);
14284
14689
  }
14285
14690
 
14286
- .b-dark .bc-accordion__item {
14691
+ .dark .bc-accordion__item {
14287
14692
  background-color: var(--bg-background);
14288
14693
  }
14289
14694
 
14290
- .b-dark .bc-accordion__header {
14695
+ .dark .bc-accordion__header {
14291
14696
  color: var(--text-normal);
14292
14697
  }
14293
14698
 
14294
- .b-dark .bc-accordion__header:hover:not(:disabled) {
14699
+ .dark .bc-accordion__header:hover:not(:disabled) {
14295
14700
  background-color: var(--bg-subtle);
14296
14701
  }
14297
14702
 
14298
- .b-dark .bc-accordion__body {
14703
+ .dark .bc-accordion__body {
14299
14704
  color: var(--text-normal);
14300
14705
  }
14301
14706
 
@@ -14720,82 +15125,82 @@ span.bc-sidebar-link {
14720
15125
  }
14721
15126
 
14722
15127
  /* Dark mode */
14723
- .b-dark .bc-calendar {
15128
+ .dark .bc-calendar {
14724
15129
  background-color: var(--bg-background);
14725
15130
  border-color: var(--border-default);
14726
15131
  }
14727
15132
 
14728
- .b-dark .bc-calendar__nav-btn {
15133
+ .dark .bc-calendar__nav-btn {
14729
15134
  color: var(--text-normal);
14730
15135
  }
14731
15136
 
14732
- .b-dark .bc-calendar__nav-btn:hover:not(:disabled) {
15137
+ .dark .bc-calendar__nav-btn:hover:not(:disabled) {
14733
15138
  background-color: var(--bg-subtle);
14734
15139
  }
14735
15140
 
14736
- .b-dark .bc-calendar__title {
15141
+ .dark .bc-calendar__title {
14737
15142
  color: var(--text-normal);
14738
15143
  }
14739
15144
 
14740
- .b-dark .bc-calendar__weekday {
15145
+ .dark .bc-calendar__weekday {
14741
15146
  color: var(--text-muted);
14742
15147
  }
14743
15148
 
14744
- .b-dark .bc-calendar__day {
15149
+ .dark .bc-calendar__day {
14745
15150
  color: var(--text-normal);
14746
15151
  }
14747
15152
 
14748
- .b-dark .bc-calendar__day:hover:not(:disabled) {
15153
+ .dark .bc-calendar__day:hover:not(:disabled) {
14749
15154
  background-color: var(--bg-subtle);
14750
15155
  }
14751
15156
 
14752
- .b-dark .bc-calendar__day--selected {
15157
+ .dark .bc-calendar__day--selected {
14753
15158
  background-color: var(--cal-selected-bg-dark);
14754
15159
  color: var(--cal-selected-text-dark);
14755
15160
  }
14756
15161
 
14757
- .b-dark .bc-calendar__day--today {
15162
+ .dark .bc-calendar__day--today {
14758
15163
  background-color: var(--cal-today-bg-dark);
14759
15164
  color: var(--cal-today-text-dark);
14760
15165
  }
14761
15166
 
14762
- .b-dark .bc-calendar__day--selected.bc-calendar__day--today {
15167
+ .dark .bc-calendar__day--selected.bc-calendar__day--today {
14763
15168
  background-color: var(--cal-selected-bg-dark);
14764
15169
  color: var(--cal-selected-text-dark);
14765
15170
  }
14766
15171
 
14767
- .b-dark .bc-calendar__title-btn {
15172
+ .dark .bc-calendar__title-btn {
14768
15173
  color: var(--text-normal);
14769
15174
  }
14770
15175
 
14771
- .b-dark .bc-calendar__title-btn:hover:not(:disabled) {
15176
+ .dark .bc-calendar__title-btn:hover:not(:disabled) {
14772
15177
  background-color: var(--bg-subtle);
14773
15178
  }
14774
15179
 
14775
- .b-dark .bc-calendar__month-cell,
14776
- .b-dark .bc-calendar__year-cell {
15180
+ .dark .bc-calendar__month-cell,
15181
+ .dark .bc-calendar__year-cell {
14777
15182
  color: var(--text-normal);
14778
15183
  }
14779
15184
 
14780
- .b-dark .bc-calendar__month-cell:hover:not(:disabled),
14781
- .b-dark .bc-calendar__year-cell:hover:not(:disabled) {
15185
+ .dark .bc-calendar__month-cell:hover:not(:disabled),
15186
+ .dark .bc-calendar__year-cell:hover:not(:disabled) {
14782
15187
  background-color: var(--bg-subtle);
14783
15188
  }
14784
15189
 
14785
- .b-dark .bc-calendar__month-cell--current,
14786
- .b-dark .bc-calendar__year-cell--current {
15190
+ .dark .bc-calendar__month-cell--current,
15191
+ .dark .bc-calendar__year-cell--current {
14787
15192
  background-color: var(--cal-selected-bg-dark);
14788
15193
  color: var(--cal-selected-text-dark);
14789
15194
  }
14790
15195
 
14791
- .b-dark .bc-calendar__month-cell--active,
14792
- .b-dark .bc-calendar__year-cell--active {
15196
+ .dark .bc-calendar__month-cell--active,
15197
+ .dark .bc-calendar__year-cell--active {
14793
15198
  background-color: var(--cal-today-bg-dark);
14794
15199
  color: var(--cal-today-text-dark);
14795
15200
  }
14796
15201
 
14797
- .b-dark .bc-calendar__month-cell--current.bc-calendar__month-cell--active,
14798
- .b-dark .bc-calendar__year-cell--current.bc-calendar__year-cell--active {
15202
+ .dark .bc-calendar__month-cell--current.bc-calendar__month-cell--active,
15203
+ .dark .bc-calendar__year-cell--current.bc-calendar__year-cell--active {
14799
15204
  background-color: var(--cal-selected-bg-dark);
14800
15205
  color: var(--cal-selected-text-dark);
14801
15206
  }
@@ -14841,13 +15246,13 @@ span.bc-sidebar-link {
14841
15246
  }
14842
15247
 
14843
15248
  /* Range selection - dark mode */
14844
- .b-dark .bc-calendar__day--range-start,
14845
- .b-dark .bc-calendar__day--range-end {
15249
+ .dark .bc-calendar__day--range-start,
15250
+ .dark .bc-calendar__day--range-end {
14846
15251
  background-color: var(--cal-selected-bg-dark);
14847
15252
  color: var(--cal-selected-text-dark);
14848
15253
  }
14849
15254
 
14850
- .b-dark .bc-calendar__day--in-range {
15255
+ .dark .bc-calendar__day--in-range {
14851
15256
  background-color: var(--cal-today-bg-dark);
14852
15257
  color: var(--cal-today-text-dark);
14853
15258
  }
@@ -15145,28 +15550,28 @@ span.bc-sidebar-link {
15145
15550
  }
15146
15551
 
15147
15552
  /* Dark mode */
15148
- .b-dark .bc-advanced-slider__track {
15553
+ .dark .bc-advanced-slider__track {
15149
15554
  background-color: var(--bg-subtle);
15150
15555
  }
15151
15556
 
15152
- .b-dark .bc-advanced-slider__fill {
15557
+ .dark .bc-advanced-slider__fill {
15153
15558
  background-color: var(--slider-color-dark);
15154
15559
  }
15155
15560
 
15156
- .b-dark .bc-advanced-slider__thumb {
15561
+ .dark .bc-advanced-slider__thumb {
15157
15562
  background-color: var(--text-normal);
15158
15563
  border-color: var(--slider-color-dark);
15159
15564
  }
15160
15565
 
15161
- .b-dark .bc-advanced-slider__value-label {
15566
+ .dark .bc-advanced-slider__value-label {
15162
15567
  background-color: var(--slider-color-dark);
15163
15568
  }
15164
15569
 
15165
- .b-dark .bc-advanced-slider__tick::before {
15570
+ .dark .bc-advanced-slider__tick::before {
15166
15571
  background-color: var(--color-gray-500);
15167
15572
  }
15168
15573
 
15169
- .b-dark .bc-advanced-slider__tick-label {
15574
+ .dark .bc-advanced-slider__tick-label {
15170
15575
  color: var(--text-muted);
15171
15576
  }
15172
15577
 
@@ -15273,20 +15678,20 @@ span.bc-sidebar-link {
15273
15678
  }
15274
15679
 
15275
15680
  /* Dark mode */
15276
- .b-dark .bc-otp-input__cell {
15681
+ .dark .bc-otp-input__cell {
15277
15682
  background-color: var(--bg-background);
15278
15683
  border-color: var(--border-default);
15279
15684
  color: var(--text-normal);
15280
15685
  }
15281
15686
 
15282
- .b-dark .bc-otp-input__cell:focus,
15283
- .b-dark .bc-otp-input__cell--focused {
15687
+ .dark .bc-otp-input__cell:focus,
15688
+ .dark .bc-otp-input__cell--focused {
15284
15689
  border-color: var(--otp-focus-border-dark);
15285
15690
  box-shadow: 0 0 0 2px
15286
15691
  color-mix(in srgb, var(--otp-focus-color-dark) 25%, transparent);
15287
15692
  }
15288
15693
 
15289
- .b-dark .bc-otp-input__cell::placeholder {
15694
+ .dark .bc-otp-input__cell::placeholder {
15290
15695
  color: var(--text-muted);
15291
15696
  }
15292
15697
 
@@ -15316,10 +15721,17 @@ span.bc-sidebar-link {
15316
15721
  background-color: var(--toggle-bg);
15317
15722
  color: var(--toggle-text);
15318
15723
  text-shadow: var(--toggle-text-shadow);
15724
+ line-height: 1;
15319
15725
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
15320
15726
  user-select: none;
15321
15727
  }
15322
15728
 
15729
+ /* Keep icons sized to the font so icon-only buttons match text button height */
15730
+ .bc-toggle-button .bc-icon {
15731
+ width: 1em;
15732
+ height: 1em;
15733
+ }
15734
+
15323
15735
  .bc-toggle-button--full-width {
15324
15736
  width: 100%;
15325
15737
  }
@@ -15376,14 +15788,14 @@ span.bc-sidebar-link {
15376
15788
  }
15377
15789
 
15378
15790
  /* Dark mode */
15379
- .b-dark .bc-toggle-button {
15791
+ .dark .bc-toggle-button {
15380
15792
  background-color: var(--toggle-bg-dark);
15381
15793
  color: var(--toggle-text-dark);
15382
15794
  border-color: var(--toggle-border-dark);
15383
15795
  text-shadow: var(--toggle-text-shadow-dark);
15384
15796
  }
15385
15797
 
15386
- .b-dark .bc-toggle-button:hover:not(:disabled) {
15798
+ .dark .bc-toggle-button:hover:not(:disabled) {
15387
15799
  background-color: var(--toggle-bg-hover-dark);
15388
15800
  color: var(--toggle-text-hover-dark);
15389
15801
  }