open-index/open-npm huggingface dataset:
npm package: @manufosela/stars-rating
Description: An interactive star rating web component with Lit
Author: manufosela
Latest version: 2.0.1

# @manufosela/stars-rating

An interactive star rating web component with half-star support. Built with [Lit](https://lit.dev/).

## Installation

```bash
npm install @manufosela/stars-rating
```

## Usage

```javascript
import '@manufosela/stars-rating';
```

```html
<!-- Display only -->
<stars-rating rating="3.5" half></stars-rating>

<!-- Interactive -->
<stars-rating manual></stars-rating>
```

## Features

- Display and interactive modes
- Half-star rating support
- Keyboard navigation
- Custom star characters
- Reset button option
- Fully accessible (ARIA support)
- CSS customizable

## Attributes

| Attribute  | Type    | Default | Description                      |
| ---------- | ------- | ------- | -------------------------------- |
| `rating`   | Number  | `0`     | Current rating value             |
| `numstars` | Number  | `5`     | Number of stars to display       |
| `manual`   | Boolean | `false` | Enable interactive mode          |
| `half`     | Boolean | `false` | Allow half-star ratings          |
| `reset`    | Boolean | `false` | Show reset button (manual mode)  |
| `disabled` | Boolean | `false` | Disable interaction              |
| `star`     | String  | `★`     | Star character to use            |

## Methods

| Method           | Description                      |
| ---------------- | -------------------------------- |
| `setRating(n)`   | Set rating (clamped to 0-numstars) |
| `resetRating()`  | Reset rating to 0                |

## Events

| Event           | Detail              | Description              |
| --------------- | ------------------- | ------------------------ |
| `rating-changed`| `{ rating: number }`| Fired when rating changes |

```javascript
starsRating.addEventListener('rating-changed', (e) => {
  console.log('New rating:', e.detail.rating);
});
```

## Keyboard Navigation

When `manual` is enabled:
- **Enter/Space**: Set rating on focused star
- **Arrow Right/Up**: Increase rating
- **Arrow Left/Down**: Decrease rating

## CSS Custom Properties

| Property                      | Default   | Description         |
| ----------------------------- | --------- | ------------------- |
| `--stars-rating-size`         | `24px`    | Star size           |
| `--stars-rating-gap`          | `4px`     | Gap between stars   |
| `--stars-rating-color`        | `#fbbf24` | Filled star color   |
| `--stars-rating-empty-color`  | `#e5e7eb` | Empty star color    |
| `--stars-rating-reset-color`  | `#6b7280` | Reset button color  |

## Examples

### Product Rating Display
```html
<stars-rating rating="4.5" half></stars-rating>
```

### User Input with Reset
```html
<stars-rating manual reset></stars-rating>
```

### Custom Hearts Scale
```html
<stars-rating
  numstars="10"
  star="♥"
  style="--stars-rating-color: #ef4444;">
</stars-rating>
```

## License

MIT
npm package: @manufosela/theme-toggle
Description: A light/dark theme toggle web component with smooth transitions, built with Lit
Author: manufosela
Latest version: 2.0.1

# @manufosela/theme-toggle

A light/dark theme toggle web component with smooth transitions and localStorage persistence. Built with [Lit](https://lit.dev/).

## Installation

```bash
npm install @manufosela/theme-toggle
```

## Usage

```javascript
import '@manufosela/theme-toggle';
```

```html
<theme-toggle></theme-toggle>
```

## Features

- Light/dark theme switching
- Automatic system preference detection
- localStorage persistence
- Smooth transitions
- Accessible (ARIA support)
- CSS class and data-attribute integration

## Attributes

| Attribute     | Type    | Default | Description                     |
| ------------- | ------- | ------- | ------------------------------- |
| `theme`       | String  | `light` | Current theme: 'light' or 'dark' |
| `persist`     | Boolean | `true`  | Persist theme to localStorage   |
| `storage-key` | String  | `theme` | localStorage key                |

## Methods

| Method           | Description                |
| ---------------- | -------------------------- |
| `setTheme(theme)`| Set theme to 'light' or 'dark' |
| `toggle()`       | Toggle between themes      |

## Events

| Event          | Detail           | Description          |
| -------------- | ---------------- | -------------------- |
| `theme-changed`| `{ theme: string }` | Fired on theme change |

```javascript
themeToggle.addEventListener('theme-changed', (e) => {
  console.log('New theme:', e.detail.theme);
});
```

## Document Integration

The component automatically:
- Sets `data-theme` attribute on `<html>`
- Adds/removes `dark` class on `<html>`

Use these in your CSS:

```css
:root[data-theme="dark"] {
  --bg: #1f2937;
  --text: #f3f4f6;
}

/* Or using class */
.dark {
  --bg: #1f2937;
}
```

## CSS Custom Properties

| Property                      | Default   | Description              |
| ----------------------------- | --------- | ------------------------ |
| `--theme-toggle-padding`      | `4px`     | Container padding        |
| `--theme-toggle-bg`           | `#f3f4f6` | Background color         |
| `--theme-toggle-radius`       | `9999px`  | Border radius            |
| `--theme-toggle-button-size`  | `36px`    | Button size              |
| `--theme-toggle-icon-size`    | `20px`    | Icon size                |
| `--theme-toggle-active-bg`    | `#fff`    | Active button background |

## License

MIT