import {
  Title, Subtitle, Description, Primary, Controls, Stories, Meta, Story, Canvas, Markdown
} from '@storybook/blocks';
import * as ComponentStories from './dt-date.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-date-text-color`  | `var(--dt-form-text-color, #000)`  |
| `--dt-date-background-color`  | `var(--dt-form-background-color, #fefefe)` |
| `--dt-date-border-color`  | `var(--dt-form-border-color, #cacaca)`   |
| `--dt-date-border-radius`  | `var(--dt-form-border-radius, 0)`   |
| `--dt-date-box-shadow`  | `var(--dt-form-input-box-shadow, inset 0 1px 2px hsl(0deg 0% 4% / 10%))`   |
| `--dt-date-disabled-background-color`   | `var(--dt-form-disabled-background-color, #e6e6e6)`   |
| `--dt-date-placeholder-color` | `#999`  |
| `--dt-date-placeholder-transform` |  `none`   |
| `--dt-date-placeholder-font-size`   | `1rem`  |
| `--dt-date-placeholder-font-weight`  |  `400`  |
| `--dt-date-placeholder-letter-spacing`  | `normal`  |
| `--dt-date-border-color-alert`  | `var(--dt-form-border-color-alert, var(--alert-color))`   |
| `--dt-date-button-hover-color`  | `#ffffff`   |
| `--dt-form-padding`   | `0.5333333333rem`   |
| `--dt-form-transition` | `box-shadow .5s,border-color .25s ease-in-out`   |

## Parts

| Part Name | Description |
|-----------|-------------|
| `input` | The date input element within the shadow DOM |
| `clear-button` | The button that clears the date value |