import {
  Title, Subtitle, Description, Primary, Controls, Stories, Meta, Story, Canvas, Markdown
} from '@storybook/blocks';
import * as ComponentStories from './dt-multi-text.stories.js';


<Meta name="Docs" of={ComponentStories} />

<Title />
<Subtitle />

## Overview
<Description />
<Primary />

## Parameters
<Controls />

## Slots

Inherits slots from
- [DtFormBase](?path=/docs/architecture-base-classes--docs#slots)
- [DTText](?path=/docs/components-form-text--docs#slots)

## Events

### `change`

**Event Detail:**
```json
{
  field: string,    // name attribute of field
  oldValue: object[], // previous array of value objects
  newValue: object[]  // updated array of value objects
}
```

## CSS Properties / Theming

Inherits custom properties from
- [DtFormBase](?path=/docs/architecture-base-classes--docs#css-properties)
- [DTText](?path=/docs/components-form-text--docs#css-properties--theming)

| Custom Properties   | Default Value   |
|:--------------------|:----------------|
| `--dt-multi-text-background-color` | `var(--dt-form-background-color, #fefefe)`  |
| `--dt-multi-text-border-color` | `var(--dt-form-border-color, #fefefe)`  |
| `--dt-multi-text-border-radius` | `var(--dt-form-border-radius, 0)`  |
| `--dt-multi-text-box-shadow` | `var(--dt-form-input-box-shadow, inset 0 1px 2px hsl(0deg 0% 4% / 10%))`  |
| `--dt-multi-text-disabled-background-color` | `var(--dt-form-disabled-background-color, #e6e6e6)` |
| `--dt-multi-text-disabled-color` | `var(--dt-form-placeholder-color, #999)` |
| `--dt-multi-text-remove-button-color` | `var(--alert-color, #cc4b37)` |
| `--dt-multi-text-remove-button-hover-background-color` | `var(--alert-color, #cc4b37)` |
| `--dt-multi-text-remove-button-hover-color` | `#ffffff` |
| `--dt-multi-text-add-button-color` | `var(--success-color, #cc4b37)` |
| `--dt-multi-text-add-button-hover-background-color` | `var(--success-color, #cc4b37)` |
| `--dt-multi-text-add-button-hover-color` | `#ffffff` |

## Parts

| Part Name     | Description                     |
| :------------ | :------------------------------ |
| `input`       | The individual text input field. |
| `btn-remove`  | The remove button for an item.   |
| `btn-add`     | The add button for new items.    |