### Install Sortable List Package

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Installs the svelte-sortable-list package using various package managers. This is the first step to integrate the sortable list functionality into your Svelte project.

```bash
pnpm install @rodrigodagostino/svelte-sortable-list
```

```bash
npm install @rodrigodagostino/svelte-sortable-list
```

```bash
yarn add @rodrigodagostino/svelte-sortable-list
```

--------------------------------

### Handle Sortable List Drag Start Event

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

The `ondragstart` event is triggered when an item within the sortable list begins to be dragged, either by a pointer device or keyboard. It returns details about the drag operation, including the device type, the dragged item's element and ID, its index, and boundary information.

```javascript
const handleDragStart = (event) => {
  const { deviceType, draggedItem, draggedItemId, draggedItemIndex, isBetweenBounds, canRemoveOnDropOut } = event.detail;
  console.log('Drag started:', { deviceType, draggedItemId, draggedItemIndex, isBetweenBounds, canRemoveOnDropOut });
};

// Usage within a Svelte component:
// <SortableList.Root ondragstart={handleDragStart}>
//   ...
// </SortableList.Root>
```

--------------------------------

### Advanced Selector for Dragged Item Outside Bounds (CSS)

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This CSS example demonstrates how to combine selectors to style the content of an item being dragged outside the list boundaries when `canRemoveOnDropOut` is enabled. It targets the `.ssl-item` when `data-is-between-bounds` is false and then selects its content.

```css
.ssl-ghost[data-can-remove-on-drop-out='true']
	.ssl-item[data-is-between-bounds='false']
	.ssl-item-content {
	background-color: var(--ssl-rose-300);
	border-color: var(--ssl-rose-400);
}
```

--------------------------------

### Styles Import

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Instructions on how to import the default styles for the Svelte Sortable List component.

```APIDOC
## Styles Import

### Description
Import the default CSS styles for the Svelte Sortable List component to apply the default visual appearance.

### Usage

Add the following import statement to your main Svelte component or a global CSS file:

```svelte
<script>
	import '@rodrigodagostino/svelte-sortable-list/styles.css';
</script>
```
```

--------------------------------

### Import Default Styles for Svelte Sortable List

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Provides the Svelte code snippet for importing the default CSS styles for the svelte-sortable-list component. This import statement should be placed within the `<script>` tags of your Svelte component to apply the library's default styling.

```svelte
<script>
	import '@rodrigodagostino/svelte-sortable-list/styles.css';
</script>
```

--------------------------------

### SortableList.Root Events

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Events are fired in the order they are listed below. Each event provides details about the drag-and-drop operation.

```APIDOC
## `<SortableList.Root>` Events

### Description
Events fire in the order listed below.

### Events

#### `onmounted`
*   **Type**: `SortableList.RootEvents['onmounted']`
*   **Trigger**: Component is mounted
*   **Returns**: `event: { detail: null }`

#### `ondragstart`
*   **Type**: `SortableList.RootEvents['ondragstart']`
*   **Trigger**: Item begins being dragged by pointer device or keyboard
*   **Returns**: `event: { detail: { deviceType: 'pointer' | 'keyboard', draggedItem: HTMLLIElement, draggedItemId: string, draggedItemIndex: number, isBetweenBounds: boolean, canRemoveOnDropOut: boolean } }`

#### `ondrag`
*   **Type**: `SortableList.RootEvents['ondrag']`
*   **Trigger**: Dragged item is moved by pointer device or keyboard (fires every few hundred milliseconds)
*   **Returns**: `event: { detail: { deviceType: 'pointer' | 'keyboard', draggedItem: HTMLLIElement, draggedItemId: string, draggedItemIndex: number, targetItem: HTMLLIElement | null, targetItemId: string | null, targetItemIndex: number | null, isBetweenBounds: boolean, canRemoveOnDropOut: boolean } }`

#### `ondrop`
*   **Type**: `SortableList.RootEvents['ondrop']`
*   **Trigger**: Dragged item is released by pointer device or keyboard
*   **Returns**: `event: { detail: { deviceType: 'pointer' | 'keyboard', draggedItem: HTMLLIElement, draggedItemId: string, draggedItemIndex: number, targetItem: HTMLLIElement | null, targetItemId: string | null, targetItemIndex: number | null, isBetweenBounds: boolean, canRemoveOnDropOut: boolean } }`
```

--------------------------------

### List Utilities

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Utility functions for common list manipulations, such as reordering and removing items.

```APIDOC
## Utilities

### `sortItems(items, from, to)`

#### Description
Reorders items in your list. This function should be used in combination with the [`ondragend` event](#sortablelistroot-events).

#### Parameters
- **items** (Array) - The current array of list items.
- **from** (number) - The original index of the item to move.
- **to** (number) - The target index for the item.

#### Returns
- (Array) - The reordered array of items.

### `removeItem(items, index)`

#### Description
Removes an item from your list by its index. This function should be used in combination with the [`ondrop` event](#sortablelistroot-events).

#### Parameters
- **items** (Array) - The current array of list items.
- **index** (number) - The index of the item to remove.

#### Returns
- (Array) - The array with the item removed.
```

--------------------------------

### Transitions API

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Provides built-in transition functions for animating elements within the sortable list.

```APIDOC
## Transitions API

### Description
Provides built-in transition functions for smooth animations when elements are added or removed from the sortable list.

### Function
`scaleFly`

### Parameters
#### Options
- **delay** (number) - Optional - The delay before the transition starts.
- **duration** (number) - Optional - The duration of the transition in milliseconds.
- **easing** (function) - Optional - The easing function to use for the animation.
- **axis** ('x' | 'y') - Optional - The axis along which the element should fly ('x' or 'y'). Defaults to 'x'.
- **x** (number) - Optional - The distance to fly along the x-axis.
- **y** (number) - Optional - The distance to fly along the y-axis.
- **opacity** (number) - Optional - The opacity value to animate to.

### Usage Example

```svelte
<script lang="ts">
	import { SortableList, scaleFly } from '@rodrigodagostino/svelte-sortable-list';
	let items = [...]; // Your list of items

	function handleDragEnd(e) {
		// Handle drag end logic
	}
</script>

<SortableList.Root ondragend={handleDragEnd}>
	{#each items as item, index (item.id)}
		<SortableList.Item
			{...item}
			{index}
			transitionIn={(node) => scaleFly(node, { duration: 320, x: -200 })}
			transitionOut={(node) => scaleFly(node, { duration: 320, x: 200 })}
		>
			<!-- Item content -->
		</SortableList.Item>
	{/each}
</SortableList.Root>
```
```

--------------------------------

### Use SortableList Component in Svelte

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Demonstrates the usage of the SortableList.Root and SortableList.Item components in Svelte. It includes defining list items, handling drag-end events to update the item order using the sortItems utility, and rendering the sortable list.

```svelte
<script lang="ts">
	import { SortableList, sortItems } from '@rodrigodagostino/svelte-sortable-list';

	let items: SortableList.ItemData[] = [
		{
			id: 'list-item-1',
			text: 'List Item 1',
		},
		{
			id: 'list-item-2',
			text: 'List Item 2',
		},
		{
			id: 'list-item-3',
			text: 'List Item 3',
		},
		{
			id: 'list-item-4',
			text: 'List Item 4',
		},
		{
			id: 'list-item-5',
			text: 'List Item 5',
		},
	];

	function handleDragEnd(e: SortableList.RootEvents['ondragend']) {
		const { draggedItemIndex, targetItemIndex, isCanceled } = e;
		if (!isCanceled && typeof targetItemIndex === 'number' && draggedItemIndex !== targetItemIndex)
			items = sortItems(items, draggedItemIndex, targetItemIndex);
	}
</script>

<SortableList.Root ondrop={handleDrop} ondragend={handleDragEnd}>
	{#each items as item, index (item.id)}
		<SortableList.Item {...item} {index}>
			<div class="ssl-item-content">
				<span class="ssl-item-content__text">{item.text}</span>
			</div>
		</SortableList.Item>
	{/each}
</SortableList.Root>
```

--------------------------------

### SortableList.Item Props

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Props available for configuring individual items within the SortableList.

```APIDOC
## `<SortableList.Item>` Props

### `id`
- **Type**: `string`
- **Default**: `undefined`
- **Description**: A unique identifier for each list item. Must be a unique string.

### `index`
- **Type**: `number`
- **Default**: `undefined`
- **Description**: The position of the item in the list. Must be a unique number.

### `isLocked`
- **Type**: `boolean | undefined`
- **Default**: `false`
- **Possible values**: `true` | `false`
- **Description**: If `true`, prevents the item from being dragged.

### `isDisabled`
- **Type**: `boolean | undefined`
- **Default**: `false`
- **Possible values**: `true` | `false`
- **Description**: If `true`, prevents the item from being dragged and applies a dimmed styling.

### `transitionIn`
- **Type**: `(node: HTMLElement, params?: any) => TransitionConfig`
- **Default**: `scaleFly`
- **Description**: A function that defines the animation played when the item is added to the list. Accepts the node and optional parameters.

### `transitionOut`
- **Type**: `(node: HTMLElement, params?: any) => TransitionConfig`
- **Default**: `scaleFly`
- **Description**: A function that defines the animation played when the item is removed from the list. Accepts the node and optional parameters.
```

--------------------------------

### Handle Sortable List Mounted Event

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

The `onmounted` event fires when the `<SortableList.Root>` component is successfully mounted to the DOM. It does not return any specific details in its event object.

```javascript
const handleMount = (event) => {
  console.log('Sortable list mounted:', event.detail); // event.detail will be null
};

// Usage within a Svelte component:
// <SortableList.Root onmount={handleMount}>
//   ...
// </SortableList.Root>
```

--------------------------------

### Apply ScaleFly Transition in Svelte

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Demonstrates how to apply the `scaleFly` transition to list items in a Svelte component. This transition animates elements scaling and flying in or out, with customizable parameters like duration, axis, and opacity.

```svelte
<script lang="ts">
	import { SortableList, scaleFly } from '@rodrigodagostino/svelte-sortable-list';
	...
</script>

<SortableList.Root ondragend={handleDragEnd}>
	{#each items as item, index (item.id)}
		<SortableList.Item
			{...item}
			{index}
			transitionIn={(node) => scaleFly(node, { duration: 320, x: -200 })}
			transitionOut={(node) => scaleFly(node, { duration: 320, x: 200 })}
		>
			...
		</SortableList.Item>
	{/each}
</SortableList.Root>
```

--------------------------------

### Types API

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Provides TypeScript definitions for type-safe development with the Svelte Sortable List component.

```APIDOC
## Types API

### Description
Provides TypeScript definitions for various components, props, and events of the Svelte Sortable List for enhanced type safety.

### Available Types

- **`SortableList.RootProps`**: Type definitions for the props of the `<SortableList.Root>` component.
- **`SortableList.ItemProps`**: Type definitions for the props of the `<SortableList.Item>` component.
- **`SortableList.ItemData`**: Type definitions for the data structure of your sortable list items.
- **`SortableList.RootEvents['onmounted']`**: Type definitions for the `onmounted` event of the `<SortableList.Root>` component.
- **`SortableList.RootEvents['ondragstart']`**: Type definitions for the `ondragstart` event of the `<SortableList.Root>` component.
- **`SortableList.RootEvents['ondrag']`**: Type definitions for the `ondrag` event of the `<SortableList.Root>` component.
- **`SortableList.RootEvents['ondrop']`**: Type definitions for the `ondrop` event of the `<SortableList.Root>` component.
- **`SortableList.RootEvents['ondragend']`**: Type definitions for the `ondragend` event of the `<SortableList.Root>` component.
- **`SortableList.RootEvents['ondestroyed']`**: Type definitions for the `ondestroyed` event of the `<SortableList.Root>` component.

### Usage Example

```svelte
<script lang="ts">
	import type { SortableList } from '@rodrigodagostino/svelte-sortable-list';
	let items = [...]; // Your list of items

	function handleDrop(e: SortableList.RootEvents['ondrop']) {
		const { draggedItemIndex, isBetweenBounds, canRemoveOnDropOut } = e;
		if (!isBetweenBounds && canRemoveOnDropOut) {
			// Remove item logic
		}
	}

	function handleDragEnd(e: SortableList.RootEvents['ondragend']) {
		const { draggedItemIndex, targetItemIndex, isCanceled } = e;
		if (!isCanceled && typeof targetItemIndex === 'number' && draggedItemIndex !== targetItemIndex) {
			// Sort items logic
		}
	}
</script>
```
```

--------------------------------

### SortableList.Root Events

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Events emitted by the SortableList root component for handling drag and drop interactions and component lifecycle.

```APIDOC
## SortableList.Root Events

### `ondragend`

#### Description
Triggered when a dragged item reaches its final destination after being released.

#### Event Payload
- **deviceType** (string) - 'pointer' or 'keyboard'.
- **draggedItem** (HTMLLIElement) - The DOM element of the item being dragged.
- **draggedItemId** (string) - The ID of the dragged item.
- **draggedItemIndex** (number) - The original index of the dragged item.
- **targetItem** (HTMLLIElement | null) - The DOM element of the item the dragged item was dropped onto, or null if dropped outside any item.
- **targetItemId** (string | null) - The ID of the target item, or null.
- **targetItemIndex** (number | null) - The index of the target item, or null.
- **isBetweenBounds** (boolean) - Indicates if the drop occurred within the list bounds.
- **canRemoveOnDropOut** (boolean) - Indicates if the item can be removed by dropping outside the bounds.
- **isCanceled** (boolean) - Indicates if the drag operation was canceled.

### `ondestroyed`

#### Description
Triggered when the SortableList component is destroyed.

#### Event Payload
- **detail** (null) - No specific detail is provided.
```

--------------------------------

### Customize Drag-and-Drop Announcements in Svelte

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This snippet demonstrates how to customize drag-and-drop announcements for a Svelte sortable list. It defines Spanish translations for 'lifted', 'dragged', 'dropped', and 'canceled' states, allowing for a more accessible user experience. The `announcements` prop is passed to the `SortableList.Root` component.

```svelte
<script lang="ts">
	import * as SortableList from "svelte-sortable-list";

	const announcements: SortableList.RootProps['announcements'] = {
		lifted: (_, draggedItemIndex) => {
			return `Ha levantado un item en la posición ${draggedItemIndex + 1}.`;
		},
		dragged: (_, draggedItemIndex, __, targetItemIndex) => {
			const startPosition = draggedItemIndex + 1;
			const endPosition = targetItemIndex + 1;
			const result =
				startPosition !== endPosition
					? `desde la posición ${startPosition} a la posición ${endPosition}`
					: `de vuelta a su posición inicial de ${startPosition}`;
			return `Ha movido el item ${result}.`;
		},
		dropped: (_, draggedItemIndex, __, targetItemIndex) => {
			const startPosition = draggedItemIndex + 1;
			const endPosition = typeof targetItemIndex === 'number' ? targetItemIndex + 1 : null;
			const result =
				endPosition === null
					? `Se ha mantenido en su posición inicial de ${startPosition}`
					: startPosition !== endPosition
						? `Se ha movido desde la posición ${startPosition} a la posición ${endPosition}`
						: `Ha vuelto a su posición inicial de ${startPosition}`;
			return `Ha soltado el item. ${result}.`;
		},
		canceled: (_, draggedItemIndex) => {
			return `Ha cancelado el arrastre. El item ha vuelto a su posición inicial de ${draggedItemIndex + 1}.`;
		}
	};
</script>

<SortableList.Root
	...
	aria-description="Presione las flechas para desplazarte por los elementos de la lista. Presione Espacio para empezar a arrastrar un elemento. Al arrastrar, use las flechas para moverlo. Presione Espacio de nuevo para soltar el elemento o Escape para cancelar."
	{announcements}
>
	...
</SortableList.Root>

```

--------------------------------

### Handle Sortable List Drop Event

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

The `ondrop` event is triggered when a dragged item is released. It returns comprehensive details about the drop operation, including the device type, the item that was dragged, its original index, and information about the target item where it was dropped (if any), along with boundary and removal status.

```javascript
const handleDrop = (event) => {
  const { deviceType, draggedItemId, draggedItemIndex, targetItemId, targetItemIndex, isBetweenBounds, canRemoveOnDropOut } = event.detail;
  console.log('Drop completed:', { deviceType, draggedItemId, draggedItemIndex, targetItemId, targetItemIndex, isBetweenBounds, canRemoveOnDropOut });
};

// Usage within a Svelte component:
// <SortableList.Root ondrop={handleDrop}>
//   ...
// </SortableList.Root>
```

--------------------------------

### Import SortableList Component in Svelte

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Imports the SortableList component from the '@rodrigodagostino/svelte-sortable-list' package. This is necessary before using the component in your Svelte templates.

```svelte
<script lang="ts">
	import { SortableList } from '@rodrigodagostino/svelte-sortable-list';
</script>
```

--------------------------------

### Handle Sortable List Dragging Event

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

The `ondrag` event fires periodically while an item is being dragged. It provides information about the ongoing drag, including the device type, the dragged item, its current index, and details about the potential drop target (item, ID, index) if one is under the dragged item. It also includes boundary and removal information.

```javascript
const handleDrag = (event) => {
  const { deviceType, draggedItemId, draggedItemIndex, targetItemId, targetItemIndex, isBetweenBounds, canRemoveOnDropOut } = event.detail;
  console.log('Dragging:', { deviceType, draggedItemId, draggedItemIndex, targetItemId, targetItemIndex, isBetweenBounds, canRemoveOnDropOut });
};

// Usage within a Svelte component:
// <SortableList.Root ondrag={handleDrag}>
//   ...
// </SortableList.Root>
```

--------------------------------

### Handle Drop and Drag End Events with TypeScript Types in Svelte

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

Shows how to use TypeScript type definitions for event handlers in Svelte when working with the SortableList component. This includes handling 'ondrop' and 'ondragend' events, providing type safety for event data like indices and flags.

```svelte
<script lang="ts">
	import type { SortableList } from '@rodrigodagostino/svelte-sortable-list';
	...

	function handleDrop(e: SortableList.RootEvents['ondrop']) {
		const { draggedItemIndex, isBetweenBounds, canRemoveOnDropOut } = e;
		if (!isBetweenBounds && canRemoveOnDropOut) items = removeItem(items, draggedItemIndex);
	}

	function handleDragEnd(e: SortableList.RootEvents['ondragend']) {
		const { draggedItemIndex, targetItemIndex, isCanceled } = e;
		if (!isCanceled && typeof targetItemIndex === 'number' && draggedItemIndex !== targetItemIndex)
			items = sortItems(items, draggedItemIndex, targetItemIndex);
	}
</script>
```

--------------------------------

### Handle Drag End Event with Svelte

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This snippet demonstrates how to use the `sortItems` utility function within a Svelte component's `ondragend` event handler. It reorders items in the list based on drag and drop actions, excluding canceled drags or when the item is dropped in its original position. It relies on the `SortableList` component and the `sortItems` utility from '@rodrigodagostino/svelte-sortable-list'.

```svelte
<script lang="ts">
	import { SortableList, removeItem, sortItems } from '@rodrigodagostino/svelte-sortable-list';
	// ... other imports and setup

	let items = []; // Assume items is initialized elsewhere

	function handleDragEnd(event: SortableList.RootEvents['dragend']) {
		const { draggedItemIndex, targetItemIndex, isCanceled } = event.detail;
		if (!isCanceled && typeof targetItemIndex === 'number' && draggedItemIndex !== targetItemIndex)
			items = sortItems(items, draggedItemIndex, targetItemIndex);
	}

	function handleRemoveClick(event: MouseEvent) {
		const target = event.target as HTMLElement;
		const item = target.closest<HTMLLIElement>('.ssl-item');
		const itemIndex = Number(item?.dataset.itemIndex);
		if (!item || itemIndex < 0) return;
		items = removeItem(items, itemIndex);
	}
</script>

<SortableList.Root on:dragend={handleDragEnd}>
	// ... list items
</SortableList.Root>

```

--------------------------------

### Style Ghost Element with `canClearOnDropOut` Enabled (CSS)

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This CSS selector targets the shadow element when the `canClearOnDropOut` option is enabled in svelte-sortable-list. It allows for specific styling of the ghost element in this scenario.

```css
.ssl-ghost[data-can-clear-on-drop-out="true"]
```

--------------------------------

### Style Ghost Element Repositioned for Pointer Drop (CSS)

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This CSS selector targets the shadow element when it has been repositioned in preparation for a pointer drop. It's used in svelte-sortable-list to indicate the potential drop location.

```css
.ssl-ghost[data-ghost-state="ptr-predrop"]
```

--------------------------------

### Style Ghost Element During Pointer Drop (CSS)

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This CSS selector targets the shadow element while a pointer drop is in progress. It's used within the svelte-sortable-list component for styling during the drop action.

```css
.ssl-ghost[data-ghost-state="ptr-drop"]
```

--------------------------------

### Style Handle Element within SortableList.ItemHandle (CSS)

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This CSS selector targets the handle element within the `<SortableList.ItemHandle>` component. It is used to style the drag handle of individual list items in svelte-sortable-list.

```css
.ssl-item-handle
```

--------------------------------

### Style Ghost Element During Pointer Drag (CSS)

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This CSS selector targets the shadow element when it is being dragged by a pointer. It is part of the svelte-sortable-list component for visual feedback during drag operations.

```css
.ssl-ghost[data-ghost-state="ptr-drag"]
```

--------------------------------

### Style Ghost Element with `canRemoveOnDropOut` Enabled (CSS)

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This CSS selector targets the shadow element when the `canRemoveOnDropOut` option is enabled in svelte-sortable-list. It is used for conditional styling of the ghost element.

```css
.ssl-ghost[data-can-remove-on-drop-out="true"]
```

--------------------------------

### Style Ghost Element During Pointer Drop Outside List (CSS)

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This CSS selector targets the shadow element when a pointer drop occurs outside the list boundaries, specifically when the `canRemoveOnDropOut` option is enabled in svelte-sortable-list.

```css
.ssl-ghost[data-ghost-state="ptr-remove"]
```

--------------------------------

### Style Remove Button Element within SortableList.ItemRemove (CSS)

Source: https://github.com/rodrigodagostino/svelte-sortable-list/blob/main/README.md

This CSS selector targets the remove button element within the `<SortableList.ItemRemove>` component. It is used to style the button responsible for removing items in svelte-sortable-list.

```css
.ssl-item-remove
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.