More documentation tweaks

apps/docs/concepts/sortable.mdx

@@ -14,8 +14,6 @@ import {sortableStyles as styles} from '/snippets/code.mdx';
 
 The `Sortable` class allows you to reorder elements in a list or across multiple lists.
 Sortable elements are both [Droppable](/concepts/droppable) and [Draggable](/concepts/draggable).
-The `Sortable` class is a thin wrapper that composes the `Draggable` and `Droppable` classes to make it simple to create sortable lists.
-
 
 export const code = `
 import {DragDropManager} from '@dnd-kit/dom';
@@ -48,8 +46,9 @@ export function App() {
   'index.js': {code: `import './styles.css';\nimport {App} from './sortable.js';\n\nApp();`, hidden: true},
   'sortable.js': {code, active: true},
   'styles.css': {code: styles, hidden: true},
-}} height={535} previewHeight={200} template="vanilla" />
+}} height={535} previewHeight={180} template="vanilla" />
 
+Under the hood, the `Sortable` class composes both the `Draggable` and `Droppable` classes, so it accepts most of the same arguments.
 
 ## API Reference
 

apps/docs/overview.mdx

@@ -41,28 +41,28 @@ Learn about the core concepts you'll need to build drag and drop interfaces:
     icon="sitemap"
     href="concepts/drag-drop-manager"
   >
-    Configure and orchestrate the drag and drop operations.
+    Configure and orchestrate the drag and drop operations
   </Card>
   <Card
     title="Draggable"
     icon="bullseye-pointer"
     href="concepts/draggable"
   >
-    Make elements draggable to drop them over droppable targets.
+    Make elements draggable to drop them over droppable targets
   </Card>
   <Card
     title="Droppable"
     icon="arrows-maximize"
     href="concepts/droppable"
   >
-    Create droppable targets for draggable elements.
+    Create droppable targets for draggable elements
   </Card>
   <Card
     title="Sortable"
     icon="layer-group"
     href="concepts/sortable"
   >
-    Reorder elements in a list or across multiple lists.
+    Reorder elements in a list or across multiple lists
   </Card>
 </CardGroup>
 
@@ -76,14 +76,14 @@ Learn how to extend the core functionality with plugins, sensors, and modifiers:
     icon="cube"
     href="extend/plugins"
   >
-    Use plugins to extend the core functionality with plugins.
+    Use plugins to extend the core functionality with plugins
   </Card>
   <Card
     title="Sensors"
     icon="signal-stream"
     href="extend/sensors"
   >
-    Use sensors to detect user input and translate it into drag and drop events.
+    Use sensors to detect user input and translate it into drag and drop events
   </Card>
   <Card
     title="Modifiers"

apps/docs/react/hooks/use-sortable.mdx

@@ -41,7 +41,7 @@ export default function App() {
 <CodeSandbox files={{
   'App.js': {code, active: true},
   'styles.css': {code: styles, hidden: true},
-}} height={470} previewHeight={200} />
+}} height={470} previewHeight={180} />
 
 ## API Reference
 

apps/docs/snippets/code.mdx

@@ -46,10 +46,40 @@ body {
 }
 
 ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 0;
   margin: 0;
+  list-style: none;
 }
 
 li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  border: none;
+  gap: 10px;
+  background-color: rgb(255, 255, 255);
+  border-radius: 6px;
+  font-size: 14px !important;
+  color: #555;
+  outline: none;
+  min-height: 50px;
+  outline: 1px solid rgba(0,0,0,0.1);
+  font-family: var(--font-family);
+  width: calc(25% - 10px);
+  min-width: 150px;
+  max-width: 300px;
+  white-space: nowrap;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
   cursor: grab;
 }
+
+li[aria-pressed="true"] {
+  transform: scale(1.025);
+  box-shadow: inset 0px 0px 1px rgba(0,0,0,0.5), -1px 0 15px 0 rgba(34, 33, 81, 0.01), 0px 15px 15px 0 rgba(34, 33, 81, 0.25)
+}
 `.trim()