import {
  Title, Subtitle, Description, Primary, Controls, Stories, Meta, Story, Canvas, Markdown
} from '@storybook/blocks';
import * as ComponentStories from './dt-multi-select-button-group.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).

## Events

### `change`

**Event Detail:**
```json
{
  field: string,    // name attribute of field
  oldValue: string, // previous value before current change
  newValue: string, // updated value
}
```

## CSS Custom Properties

Inherits custom properties from [DtFormBase](?path=/docs/architecture-base-classes--docs#css-properties).

| Custom Properties   | Default Value   |
|---------------------|-----------------|
| `--dt-multi-select-button-group-margin-bottom` | `5px` |
| `--dt-multi-select-button-group-button-font-size` | `0.75rem` |
| `--dt-multi-select-button-group-button-font-weight` | `0` |
| `--dt-multi-select-button-group-button-line-height` | `1em` |
| `--dt-multi-select-button-group-button-padding-y` | `0.85em` |
| `--dt-multi-select-button-group-button-padding-x` | `1em` |
| `--dt-multi-select-button-group-gap-y` | `5px` |
| `--dt-multi-select-button-group-gap-x` | `10px` |
| `--dt-multi-select-button-group-error-margin-top` | `5px` |

## Parts

| Part Name | Description |
|-----------|-------------|
| `input-group` | The container for the button group and icons |
| `button-group` | The container for the buttons |
| `button` | Individual buttons within the group |