<!-- Generated by npm run gen:skill from ui/Label/skill.md - do not edit. -->

# Label

## `<label>`

- `format`: default | timestamp | date | time | since | local-timestamp | local-date | local-time
- `icon-pos`: left | right
- `heading`: 1 | 2 | 3 | 4 | 5 | 6
- `icon`, `selectable`, `ellipsis`
- events: ContextMenu, DoubleClick, Select
- methods: clear, setTitle

```xml
<panel type="rows" gap="4" padding="5">
  <label text="2024-01-15T10:30:00" format="since"/>
  <label text="2024-01-15T10:30:00" format="date"/>
  <label text="2024-01-15T10:30:00" format="time"/>
</panel>
```

## Guidance

- `heading="1".."6"`, chosen by the outline, makes a real heading (h1..h6); a big class alone does not.
- Style text with `class="xios-type-*"`: display, heading, subheading, body, caption (hint, muted in a token theme), label, strong.
- `format` reformats a bound or set timestamp (`since` gives "3 hours ago"); `ellipsis="true"` marks clipped text and puts the full text in the tooltip.
- A label with a Select trigger answers the mouse only: use a button for actions.
- A label beside a field does not name it: fields take `label=` from their panel.
