npm package: @outbook/webcomponents-tabs
Description: Web components tabs
Author: Antonio Rodríguez
Latest version: 1.0.1

# @outbook/webcomponents-tabs

This package provides a web component for creating a tabbed interface, allowing users to switch between different content panels.

## Installation

```bash
npm install @outbook/webcomponents-tabs
```

## Usage

### As a Lit Element

```javascript
import {html} from 'lit';
import {Tabs} from '@outbook/webcomponents-tabs';

function render() {
  return html`
    ${Tabs({
    items: [
      {title: 'Tab 1', content: () => html`<p>Content for Tab 1</p>`},
      {title: 'Tab 2', content: () => html`<p>Content for Tab 2</p>`}
    ],
    currentTabIndex: 0
  })}
  `;
}
```

### Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined. When using direct HTML, you will need to manually manage the `slot` attributes for content.

```javascript
import '@outbook/webcomponents-tabs';
```

```html
<outbook-tabs>
  <div slot="slot-0">
    <p>Content for Tab 1</p>
  </div>
  <div slot="slot-1">
    <p>Content for Tab 2</p>
  </div>
</outbook-tabs>
```

## Component: `outbook-tabs`

This is the underlying web component. It can be used directly in HTML or in any framework.

### Properties (via `Tabs` function)

The `Tabs` function accepts an object with the following properties:

| Property           | Type      | Default     | Description                                                                     |
|--------------------|-----------|-------------|---------------------------------------------------------------------------------|
| `items`            | `Array`   | `[]`        | An array of objects, each representing a tab. Each object should have a `title` (String) and `content` (Function returning HTML). Optional `id` (String) and `ariaLabel` (String) can also be provided. |
| `currentTabIndex`  | `Number`  | `0`         | The 0-based index of the tab that should be initially selected.                 |
| `isInDialog`       | `Boolean` | `false`     | If `true`, applies specific styling for when the tabs are within a modal dialog. |
| `extraClasses`     | `String`  | `undefined` | Additional CSS classes to apply to the host element.                            |

### Slots

The content for each tab is rendered into a named slot. The name of the slot follows the pattern `slot="slot-${item.id || index}"`, where `item.id` is the optional `id` provided in the `items` array, or the tab's index if no `id` is specified.

### Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

### Custom Properties

Can be used with css `light-dark` function.

| Custom Property                    | Description                 |
|------------------------------------|-----------------------------|
| `--outbook-tabs--color-background` | The background color of tabs. |
| `--outbook-tabs--color-border`     | The border color of tabs.     |
| `--outbook-tabs--color-text`       | The text color of tabs.       |

## License

This component is licensed under the Apache-2.0 License.