# Label

A form label component. `for` points to the target control's id, and clicking focuses the control; supports a required asterisk and its position.

## Basic usage

<DemoBlock title="Basic label">
  <oas-label for="demo-input">Name</oas-label>
  <oas-input id="demo-input" placeholder="Enter your name"></oas-input>
</DemoBlock>

## Required asterisk

`required` appends a `*` marker; `position` places the asterisk before (`before`) or after (`after`, default) the text.

<DemoBlock title="Required asterisk">
  <oas-label for="demo-required" required>Email</oas-label>
  <oas-input id="demo-required" placeholder="Enter your email"></oas-input>
</DemoBlock>

<DemoBlock title="Asterisk before">
  <oas-label for="demo-before" required position="before">Phone number</oas-label>
  <oas-input id="demo-before" placeholder="Enter your phone number"></oas-input>
</DemoBlock>

## Plain text label

Without `for`, only text is rendered and clicks don't forward focus; long text wraps instead of overflowing.

<DemoBlock title="Plain text & long text">
  <oas-label>Plain text label without for</oas-label>
  <oas-label>This is an especially long label text, used to demonstrate that long text wraps automatically without overflowing the container boundary. Please be patient while reading.</oas-label>
</DemoBlock>

## Size

`size` controls the font size in three tiers: `small` for auxiliary text, `medium` (default) for base text, and `large` for emphasis — mapped to the `--oas-font-size-sm / md / lg` font tokens respectively.

<DemoBlock title="Size tiers">
  <oas-label size="small">Small label</oas-label>
  <oas-label size="medium">Medium label</oas-label>
  <oas-label size="large">Large label</oas-label>
</DemoBlock>

## Weight

`weight` controls the font weight in two tiers: `regular` (default) and `semibold` for emphasis (`font-weight: 600`).

<DemoBlock title="Weight tiers">
  <oas-label>Regular-weight label</oas-label>
  <oas-label weight="semibold">Semibold emphasized label</oas-label>
</DemoBlock>

## States

`error` renders validation-failure red text; `disabled` statically grays out (purely visual, doesn't block events — the associated control manages its own disabled); `colon` appends a colon after the text.

<DemoBlock title="States">
  <oas-label error>Failed validation label</oas-label>
  <oas-label disabled>Disabled label</oas-label>
  <oas-label colon>Label with colon</oas-label>
  <oas-label required colon>Required + colon</oas-label>
</DemoBlock>

## Tooltip

The label itself has no tooltip attribute — the hint capability is achieved by **composing** with `oas-tooltip` (component wrapping component):

<DemoBlock title="Compose with oas-tooltip">
  <oas-tooltip content="Username must be 3-20 characters">
    <oas-label>Username</oas-label>
  </oas-tooltip>
</DemoBlock>

## Color

`color` accepts 11 preset names (auto-adapting to light/dark themes) or any CSS color value (takes effect immediately, overriding presets and defaults). Text uses the compliant token:

<DemoBlock title="Preset palette">
  <oas-label color="red">Red label</oas-label>
  <oas-label color="green">Green label</oas-label>
  <oas-label color="blue">Blue label</oas-label>
</DemoBlock>

<DemoBlock title="Custom color value">
  <oas-label color="var(--oas-color-info-text)">Teal label</oas-label>
</DemoBlock>

## Alignment & wrapping (host CSS equivalents)

Text alignment and wrapping don't need component attributes — one line of host CSS does it:

<DemoBlock title="Alignment & wrapping (host CSS)">
  <oas-label style="text-align: right; display: block;">Right-aligned label</oas-label>
  <oas-label style="white-space: nowrap;">No-wrap label</oas-label>
</DemoBlock>

Required-mark forms (asterisk + position) are covered by `required` + `position`; the Field combo (label + error + description) is handled by `oas-form-item`.

## API

### oas-label

#### Attributes

| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| `colon` | Append a colon (`:`) after the label text | `boolean` | — |
| `color` | Text color: accepts 11 preset names (mapped to `--oas-preset-*-text` compliant tokens) or any CSS color value | `string` | — |
| `disabled` | Disabled state (visual only: grayed out but does not block events; the associated control manages its own disabled) | `boolean` | — |
| `error` | Error state (red text) | `boolean` | — |
| `for` | Target control id; click forwards to `getElementById(for).focus()` | `string` | — |
| `position` | Position of the asterisk relative to the text | `string` | `after` |
| `required` | Append a required `*` marker (`aria-hidden`) | `boolean` | — |
| `size` | Label font-size step: `small`/`medium` (default)/`large` | `string` | — |
| `weight` | Label font weight: `regular` (default)/`semibold` | `string` | — |

#### Slots

| Name | Description |
| --- | --- |
| default | Label content (text / icons) |

#### CSS Variables

| CSS Variable | Default |
| --- | --- |
| `--oas-label-color` | `var(--oas-color-text-primary)` |

> Note: `for` is also synced to the native `<label>` `for` attribute; the click behavior is manually forwarded and can focus the target control across Shadow DOM. Double-clicking doesn't select text (consistent with mainstream behavior).