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

## 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-text-text-color`  | `var(--dt-form-text-color, #0a0a0a)`  |
| `--dt-text-background-color`  | `var(--dt-form-background-color, #fefefe)` |
| `--dt-text-border-color`  | `var(--dt-form-border-color, #cecece)`   |
| `--dt-text-border-radius`  | `var(--dt-form-border-radius, 0)`  |
| `--dt-text-box-shadow`  | `var(--dt-form-input-box-shadow, inset 0 1px 2px hsl(0deg 0% 4% / 10%))`   |
| `--dt-text-disabled-background-color`   | `var(--dt-form-disabled-background-color, #e6e6e6)`   |
| `--dt-text-placeholder-color` | `var(--dt-form-placeholder-color, #999)`  |
| `--dt-text-placeholder-transform` |  `none`   |
| `--dt-text-placeholder-font-size`   | `1rem`  |
|  `--dt-text-placeholder-font-weight`  |  `400`  |
| `--dt-text-placeholder-letter-spacing`  | `normal`  |
| `--dt-text-border-color-alert`  | `var(--dt-form-border-color-alert, var(--alert-color))`   |
| `--dt-form-padding`   | `0.5333333333rem`   |
| `--dt-form-transition` | `box-shadow .5s,border-color .25s ease-in-out`   |

## Parts

| Part Name | Description |
|-----------|-------------|
| `input` | The input element within the shadow DOM |