# Label 标签

表单标签组件，`for` 指向目标控件 id，点击代理聚焦目标控件；支持必填星号与星号位置。

## 基本用法

<DemoBlock title="基础标签">
  <oas-label for="demo-input">姓名</oas-label>
  <oas-input id="demo-input" placeholder="请输入姓名"></oas-input>
</DemoBlock>

## 必填星号

`required` 追加 `*` 标记；`position` 控制星号位于文本前（`before`）或后（`after`，默认）。

<DemoBlock title="必填星号">
  <oas-label for="demo-required" required>邮箱</oas-label>
  <oas-input id="demo-required" placeholder="请输入邮箱"></oas-input>
</DemoBlock>

<DemoBlock title="星号前置">
  <oas-label for="demo-before" required position="before">手机号</oas-label>
  <oas-input id="demo-before" placeholder="请输入手机号"></oas-input>
</DemoBlock>

## 纯文本标签

不设置 `for` 时仅渲染文本，点击无焦点代理；长文本自动换行不溢出。

<DemoBlock title="纯文本与长文本">
  <oas-label>无 for 的纯文本标签</oas-label>
  <oas-label>这是一段特别长的标签文案，用于演示长文本自动换行不溢出容器边界的效果，请保持耐心阅读。</oas-label>
</DemoBlock>

## 尺寸

`size` 控制字号三档：`small` 小字辅助 / `medium`（默认）基准字号 / `large` 大字强调，分别映射 `--oas-font-size-sm / md / lg` 字号 token。

<DemoBlock title="尺寸档位">
  <oas-label size="small">小号标签</oas-label>
  <oas-label size="medium">中号标签</oas-label>
  <oas-label size="large">大号标签</oas-label>
</DemoBlock>

## 字重

`weight` 控制字重两档：`regular`（默认）常规 / `semibold` 半粗强调（`font-weight: 600`）。

<DemoBlock title="字重档位">
  <oas-label>常规字重的标签</oas-label>
  <oas-label weight="semibold">半粗强调的标签</oas-label>
</DemoBlock>

## 状态

`error` 校验失败红字；`disabled` 静态灰化（纯视觉，不拦事件——关联控件自己管 disabled）；`colon` 文本后冒号。

<DemoBlock title="状态">
  <oas-label error>校验失败的标签</oas-label>
  <oas-label disabled>禁用的标签</oas-label>
  <oas-label colon>带冒号的标签</oas-label>
  <oas-label required colon>必填 + 冒号</oas-label>
</DemoBlock>

## 提示（tooltip）

label 自身不加提示属性——提示能力通过**组合** `oas-tooltip` 实现（组件套组件）：

<DemoBlock title="组合 oas-tooltip">
  <oas-tooltip content="用户名需 3-20 字符">
    <oas-label>用户名</oas-label>
  </oas-tooltip>
</DemoBlock>

## 颜色

`color` 支持 11 个预设色名（明暗主题自动适配）或任意 CSS 色值（直接生效，优先于预设与默认）。文字走达标 token：

<DemoBlock title="预设色板">
  <oas-label color="red">红色标签</oas-label>
  <oas-label color="green">绿色标签</oas-label>
  <oas-label color="blue">蓝色标签</oas-label>
</DemoBlock>

<DemoBlock title="自定义色值">
  <oas-label color="var(--oas-color-info-text)">青碧色标签</oas-label>
</DemoBlock>

## 布局对齐与换行（宿主 CSS 等价做法）

文字对齐/换行这类布局样式不需要组件属性，宿主一行 CSS 即得：

<DemoBlock title="对齐与换行（宿主 CSS）">
  <oas-label style="text-align: right; display: block;">右对齐标签</oas-label>
  <oas-label style="white-space: nowrap;">不换行标签</oas-label>
</DemoBlock>

必填标记形态（星号 + 位置）由 `required` + `position` 覆盖；Field 组合（label + 错误提示 + 描述）由 `oas-form-item` 承载。

## API

### oas-label

#### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `colon` | 文字后补冒号（`:`） | `boolean` | — |
| `color` | 文字色：支持 11 个预设名（映射 `--oas-preset-*-text` 达标 token）或任意 CSS 色值 | `string` | — |
| `disabled` | 禁用态（纯视觉：灰化但不拦截事件，关联控件自管 disabled） | `boolean` | — |
| `error` | 错误态（红色文字） | `boolean` | — |
| `for` | 目标控件 id，点击代理 `getElementById(for).focus()` | `string` | — |
| `position` | 星号相对文本的位置 | `string` | `after` |
| `required` | 追加必填 `*` 标记（`aria-hidden`） | `boolean` | — |
| `size` | label 文字字号档：`small`/`medium`（默认）/`large` | `string` | — |
| `weight` | label 文字字重：`regular`（默认）/`semibold` 半粗强调 | `string` | — |

#### 插槽

| 名称 | 说明 |
| --- | --- |
| 默认 | 标签内容（文本 / 图标等） |

#### CSS 变量

| CSS 变量 | 默认值 |
| --- | --- |
| `--oas-label-color` | `var(--oas-color-text-primary)` |

> 说明：`for` 同时同步到原生 `<label>` 的 `for` 属性；点击行为为手动代理，可跨 Shadow DOM 聚焦目标控件。双击不选中文本（与主流行为一致）。