open-index/open-npm huggingface dataset:
npm package: @manufosela/calendar-inline
Description: Inline calendar web component with horizontal scrolling
Author: manufosela
Latest version: 2.0.0

# @manufosela/calendar-inline

Inline calendar web component built with Lit 3. Features date selection, navigation, holidays, week numbers, and full localization support.

## Installation

```bash
npm install @manufosela/calendar-inline
```

## Usage

```html
<script type="module">
  import '@manufosela/calendar-inline';
</script>

<calendar-inline></calendar-inline>
```

## Examples

### Basic Usage

```html
<calendar-inline></calendar-inline>
```

### Pre-selected Date

```html
<calendar-inline value="2025-01-15"></calendar-inline>
```

### Date Range

```html
<calendar-inline
  min="2025-01-01"
  max="2025-12-31"
></calendar-inline>
```

### With Holidays

```html
<calendar-inline id="cal"></calendar-inline>
<script>
  document.getElementById('cal').holidays = [
    { date: '2025-01-01', title: 'New Year' },
    { date: '2025-12-25', title: 'Christmas' }
  ];
</script>
```

### Week Numbers

```html
<calendar-inline show-week-numbers></calendar-inline>
```

### Sunday Start

```html
<calendar-inline first-day-of-week="0"></calendar-inline>
```

### Disabled Dates

```html
<calendar-inline id="cal"></calendar-inline>
<script>
  document.getElementById('cal').disabledDates = [
    '2025-01-05',
    '2025-01-12',
    '2025-01-19'
  ];
</script>
```

### Spanish Locale

```html
<calendar-inline locale="es"></calendar-inline>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `value` | `String` | `''` | Selected date (ISO format: YYYY-MM-DD) |
| `min` | `String` | `''` | Minimum selectable date |
| `max` | `String` | `''` | Maximum selectable date |
| `disabledDates` | `Array` | `[]` | Array of disabled date strings |
| `holidays` | `Array` | `[]` | Array of `{date, title}` objects |
| `firstDayOfWeek` | `Number` | `1` | First day (0=Sunday, 1=Monday) |
| `showWeekNumbers` | `Boolean` | `false` | Show ISO week numbers |
| `locale` | `String` | `'en'` | Locale for formatting |

## Methods

| Method | Description |
|--------|-------------|
| `goToMonth(year, month)` | Navigate to specific month (0-11) |
| `goToToday()` | Navigate to current month |

## Events

| Event | Detail | Description |
|-------|--------|-------------|
| `date-select` | `{date, dateObj, holiday}` | Fired when a date is selected |
| `month-change` | `{month, year}` | Fired when month changes |

## CSS Custom Properties

| Property | Default | Description |
|----------|---------|-------------|
| `--calendar-bg` | `#fff` | Background color |
| `--calendar-text` | `#1f2937` | Text color |
| `--calendar-accent` | `#3b82f6` | Accent color |
| `--calendar-today` | `#dbeafe` | Today highlight color |
| `--calendar-selected` | `#3b82f6` | Selected date color |

## Styling Example

```html
<calendar-inline style="
  --calendar-accent: #8b5cf6;
  --calendar-selected: #8b5cf6;
  --calendar-today: #f3e8ff;
"></calendar-inline>
```

## License

Apache-2.0
npm package: @manufosela/canvas-polygon
Description: Webcomponent canvas-polygon following open-wc recommendations to draw polygons on a canvas
Author: @manufosela
Latest version: 1.0.0

# \<canvas-polygon>

This webcomponent draw polygons on a canvas.
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation

## Installation

```bash
npm i canvas-polygon
```

## Usage

```html
<script type="module">
  import 'canvas-polygon/canvas-polygon.js';
</script>

<canvas-polygon></canvas-polygon>

<canvas-polygon size="100" sides="3" line-width="4" bg-color="cyan"></canvas-polygon>
```

## Attributtes

 * **size** - The size of the canvas element in pixels.
 * **sides** - The number of sides of the polygon to render.
 * **line-width** - The width of the polygon's stroke in pixels.
 * **bg-color** - The background color of the canvas element.
 * **offset-rotation** - The rotation offset of the polygon in radians.

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

```bash
npm run test:watch
```

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`