list-box-svelte/README.md

A flexible and customizable dropdown component built using Svelte.

# Svelte Dropdown Component

A flexible and customizable dropdown component built using Svelte.

## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Events](#events)
- [Styling](#styling)
- [Examples](#examples)
- [Contributing](#contributing)
- [License](#license)

## Installation

Install the package using npm:

```bash
npm install list-box-svelte
```

## Usage

Import the `Dropdown` component into your Svelte file:

```javascript
import Dropdown from 'list-box-svelte';
```

Use it within your Svelte template:

```html
<Dropdown items={items} bind:selected={selected}>
    <span slot="trigger" let:selected>{selected}</span>
    <span slot="item" let:item>{item}</span>
</Dropdown>
```

## Props

- **items**: Array of items to populate the dropdown.
- **toggle**: Boolean to control dropdown visibility.
- **value**: Current value of the dropdown.
- **isSearch**: Boolean to enable/disable search functionality.
- **defaultSelectedIndex**: Index of the default selected item.

## Events

- **select**: Event dispatched when an item is selected.

Usage example:
```html
<script>
    function handleSelect(item) {
        console.log('Selected item:', item);
    }
</script>

<Dropdown items={items} on:select={handleSelect}>
    <!-- ... -->
</Dropdown>
```

## Styling

The dropdown component can be customized using CSS variables or by modifying the component's internal styles.

CSS classes:
- `.dropdown`: Wrapper class for the dropdown.
- `.dropdown ul`: Styling for the dropdown list.
- `.dropdown ul li`: Styling for individual list items.

## Examples

### Basic Example

```html
<Dropdown items={['Option 1', 'Option 2', 'Option 3']} on:select={handleSelect}>
    <span slot="trigger" let:selected>{selected}</span>
    <span slot="item" let:item>{item}</span>
</Dropdown>
```

### Example with Search

```html
<Dropdown items={countries} isSearch on:select={handleSelect}>
    <span slot="trigger" let:selected>{selected ? selected.name : 'Select a country'}</span>
    <span slot="item" let:item>{item.name}</span>
</Dropdown>
```

## Contributing

Contributions are welcome! To contribute to this project, follow these steps:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature`)
3. Make your changes.
4. Commit your changes (`git commit -am 'Add new feature'`)
5. Push to the branch (`git push origin feature`)
6. Create a Pull Request.

## License

This project is licensed under the [MIT License](LICENSE).

---

Feel free to add more sections or elaborate on each section based on your specific component's features and requirements!