# Separator

A simple horizontal separator component for visually dividing content sections.

## Features

- **Customizable Height**: Set custom height for the separator
- **Custom Styling**: Apply custom CSS styles
- **Lightweight**: Minimal implementation with maximum flexibility

## Installation

```bash
npm install @ticatec/uniface-element
```

```typescript
import Separator from '@ticatec/uniface-element/Separator';
```

## Basic Usage

```svelte
<script>
  import Separator from '@ticatec/uniface-element/Separator';
</script>

<div>
  <h2>Section 1</h2>
  <p>Content for section 1</p>

  <Separator />

  <h2>Section 2</h2>
  <p>Content for section 2</p>
</div>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `height` | `string` | `'24px'` | Height of the separator |
| `style` | `string` | `''` | Additional CSS styles |

## Examples

### Custom Height

```svelte
<script>
  import Separator from '@ticatec/uniface-element/Separator';
</script>

<!-- Thin separator -->
<Separator height="8px" />

<!-- Default height -->
<Separator height="24px" />

<!-- Thick separator -->
<Separator height="48px" />
```

### Custom Styling

```svelte
<script>
  import Separator from '@ticatec/uniface-element/Separator';
</script>

<Separator
  height="2px"
  style="background: linear-gradient(90deg, transparent, #ccc, transparent);"
/>
```

### Multiple Separators

```svelte
<script>
  import Separator from '@ticatec/uniface-element/Separator';
</script>

<div class="content">
  <h3>Header</h3>
  <p>Content here</p>

  <Separator height="16px" />

  <h3>Subsection</h3>
  <p>More content</p>

  <Separator height="32px" style="background-color: #007acc;" />

  <h3>Footer Section</h3>
</div>
```

## Best Practices

1. **Visual Hierarchy**: Use separator heights to establish visual hierarchy
2. **Spacing**: Adjust height to control whitespace between sections
3. **Consistency**: Maintain consistent separator styles across your application
4. **Minimal Design**: Keep separators subtle to avoid dominating the layout