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


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

<Title />
<Subtitle />

## Overview
<Description />
<Primary />

## Parameters
<Controls />

## Slots

### `icon-start`

HTML to be displayed in place of the label icon. Use this if you want to render an SVG icon.

Example:
```html
<dt-label>
  <svg slot="icon-start" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><linearGradient id="lg"><stop offset="0%" stop-color="#000000"/><stop offset="100%" stop-color="#c3c3c3"/></linearGradient><rect x="2" y="2" width="96" height="96" style="fill:url(#lg);stroke:#ffffff;stroke-width:2"/><text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#ffffff">icon</text></svg>
</dt-label>
```

### `icon-end`

HTML to be displayed at the end of the label line. Example usages are add or edit icons.

Example:
```html
<dt-label>
  <slot name="icon-end" slot="icon-end">
    <button class="icon-btn" type="button">
      <dt-icon icon="mdi:plus-thick"></dt-icon>
    </button>
  </slot>
</dt-label>
```

## Events

## CSS Properties / Theming

| Custom Properties   | Default Value   |
|---------------------|-----------------|
| `--dt-label-font-size` | `14px`   |
| `--dt-label-font-weight`  | `700`   |
| `--dt-label-color`  | `var(--dt-form-text-color, #000)`  |
| `--dt-label-tooltip-color`  |  `var(--gray-0)`   |
| `--dt-label-tooltip-background` | `var(--surface-2)`  |