docs: add callouts for usability

Author: rijkvanzanten

docs/content/1.getting-started/2.usage.md

@@ -466,13 +466,21 @@ import '@directus/vue-split-panel/index.css';
 </script>
 
 <template>
- <SplitPanel primary="start">
+ <SplitPanel primary="start" class="h-128">
  <template #start>
- <div class="w-full bg-orange-50 flex items-center justify-center">Panel A</div>
+ <div class="w-full h-full bg-orange-50 flex items-center justify-center">Panel A</div>
  </template>
  
  <template #end>
- <div class="w-full h-full bg-blue-50 flex items-center justify-center">Panel B</div>
+ <SplitPanel orientation="vertical">
+ <template #start>
+ <div class="w-full h-full bg-red-50 flex items-center justify-center">Panel B</div>
+ </template>
+ 
+ <template #end>
+ <div class="w-full h-full bg-green-50 flex items-center justify-center">Panel C</div>
+ </template>
+ </SplitPanel>
  </template>
  </SplitPanel>
 </template>
@@ -487,7 +495,7 @@ By setting `primary` to either `start` or `end`, you can make sure that the prim
 
  :::split-panel
  ---
- class: w-full resize-x
+ class: w-full
  primary: start
  size: 350
  size-unit: px
@@ -525,6 +533,10 @@ import '@directus/vue-split-panel/index.css';
 
 ::
 
+::callout{icon="i-lucide-info" color="primary"}
+Resize your browser window to see primary in action.
+::
+
 ## Accessibility
 
 Uses the [Window Splitter WAI-ARIA pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter).
@@ -540,3 +552,7 @@ Uses the [Window Splitter WAI-ARIA pattern](https://www.w3.org/WAI/ARIA/apg/patt
 | :kbd{value="ArrowLeft"} | Moves a vertical splitter left |
 | :kbd{value="Home"} | Moves the splitter to the configured min-size |
 | :kbd{value="End"} | Moves the splitter to the configured max-size |
+
+::callout{icon="i-lucide-person-standing" color="warning"}
+The divider by default has no styling. Please add your own divider element to handle focus styles.
+::