# Details


## Examples

### Default

```html
<m-details ?open=${args.open} name=${args.name} caret=${args.caret}>
      <span slot="summary">Click to expand details</span>
      <p>This is the content inside the details component. It can contain any HTML content.</p>
    </m-details>
```

### Box

```html
<m-details ?open=${args.open} name=${args.name} caret=${args.caret} variant=${args.variant}>
      <span slot="summary">Click to expand details</span>
      <p>This is the content inside the details component. It can contain any HTML content.</p>
    </m-details>
```

### Open

```html
<m-details open>
      <span slot="summary">This details is open by default</span>
      <p>This content is visible because the details component is open.</p>
      <p>You can still toggle it by clicking the summary.</p>
    </m-details>
```

### CaretPosition

```html
<m-details caret="start">
      <span slot="summary">The caret is at the start and closed</span>
    </m-details>
    <m-details open caret="start">
      <span slot="summary">The caret is at the start and open</span>
    </m-details>
    <m-details caret="end">
      <span slot="summary">The caret is at the end and closed</span>
    </m-details>
    <m-details open caret="end">
      <span slot="summary">The caret is at the end and open</span>
    </m-details>
```

### HoverState

```html
CaretPosition.render()
```

### FocusVisibleState

```html
CaretPosition.render()
```