<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kole UI · Tag (H5)</title>
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Tag.css">
<style>
  .demo { padding: 24px; background: var(--kole-color-page-bg); font-family: var(--font-family); }
  h1 { font-size: 20px; margin: 0 0 4px; color: var(--kole-color-text-title); }
  .sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
  .demo-block { background: var(--kole-color-card-bg); border-radius: 8px; padding: 16px; margin-bottom: 20px; }
  .demo-block > .hint { color: var(--kole-color-text-secondary); font-size: 12px; margin: 0 0 12px; }
  .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
</style>
</head>
<body>
<div class="demo">
  <h1>Kole UI · Tag 组件（纯 H5）</h1>
  <p class="sub">对齐设计令牌：bg #F0F5FF / color #2F54EB / 圆角 2px / padding 1px 8px</p>

  <div class="demo-block">
    <p class="hint">预设状态</p>
    <div class="row">
      <span class="kole-tag" role="status">品牌标签</span>
      <span class="kole-tag kole-tag-green" role="status">成功</span>
      <span class="kole-tag kole-tag-red" role="status">错误</span>
      <span class="kole-tag kole-tag-orange" role="status">警告</span>
      <span class="kole-tag kole-tag-gray" role="status">默认</span>
    </div>
  </div>

  <div class="demo-block">
    <p class="hint">带圆点</p>
    <div class="row">
      <span class="kole-tag kole-tag-dot">在线</span>
      <span class="kole-tag kole-tag-green kole-tag-dot">已发布</span>
      <span class="kole-tag kole-tag-red kole-tag-dot">异常</span>
    </div>
  </div>

  <div class="demo-block">
    <p class="hint">可关闭（点击 × 移除）</p>
    <div class="row" id="tag-list">
      <span class="kole-tag" role="status">前端 <i class="kole-tag-close" role="button" aria-label="移除">×</i></span>
      <span class="kole-tag" role="status">后端 <i class="kole-tag-close" role="button" aria-label="移除">×</i></span>
      <span class="kole-tag kole-tag-green" role="status">设计 <i class="kole-tag-close" role="button" aria-label="移除">×</i></span>
    </div>
  </div>

  <div class="demo-block">
    <p class="hint">自定义颜色</p>
    <div class="row">
      <span class="kole-tag kole-tag-custom" role="status" style="--kole-tag-color:#722ED1;--kole-tag-bg:#F9F0FF">紫色</span>
      <span class="kole-tag kole-tag-custom" role="status" style="--kole-tag-color:#006D75;--kole-tag-bg:#E6FFFB">青色</span>
    </div>
  </div>
</div>

<script>
document.getElementById('tag-list').addEventListener('click', (e) => {
  const close = e.target.closest('.kole-tag-close');
  if (close) close.parentElement.remove();
});
</script>
</body>
</html>
