@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/tag/meta.d.ts

@@ -1,12 +1,13 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
- * Tag — see specs/components/show/Tag.spec.md
+ * Tag — 严格对齐 Semi semi-ui/tag。
  */
 export declare const meta: {
     readonly name: "Tag";
     readonly category: "show";
-    readonly description: "标签：light/solid/ghost 三态，五种语义色，可关闭(closable)与可选中(checkable)；受控 checked/visible 不回写，仅通过 onChange/onClose 通知。";
-    readonly exports: readonly ["Tag"];
+    readonly semiEquivalent: "Tag";
+    readonly description: "标签：light/solid/ghost 三态，16 色板 + white，可关闭(closable)、可交互(onClick/keydown)、头像(avatarSrc)、AI 多彩(colorful/gradient)、前后缀图标。受控 visible 不回写，仅通过 onClose 通知。配套 TagGroup（折叠 +N）与 SplitTagGroup（连接式组合），对齐 Semi 同页三组件。";
+    readonly exports: readonly ["Tag", "TagGroup", "SplitTagGroup"];
     readonly props: readonly [{
         readonly name: "type";
         readonly type: "'light'|'solid'|'ghost'";
@@ -14,18 +15,19 @@ export declare const meta: {
         readonly desc: "视觉风格";
     }, {
         readonly name: "color";
-        readonly type: "'grey'|'primary'|'success'|'warning'|'danger'";
+        readonly type: "'amber'|'blue'|'cyan'|'green'|'grey'|'indigo'|'light-blue'|'light-green'|'lime'|'orange'|'pink'|'purple'|'red'|'teal'|'violet'|'yellow'|'white'";
         readonly default: "'grey'";
-        readonly desc: "语义色";
+        readonly desc: "语义色，对齐 Semi 16 色板 + white";
     }, {
         readonly name: "size";
         readonly type: "'small'|'default'|'large'";
         readonly default: "'default'";
+        readonly desc: "default 与 small 同高";
     }, {
         readonly name: "shape";
         readonly type: "'square'|'circle'";
         readonly default: "'square'";
-        readonly desc: "circle 用 full 圆角";
+        readonly desc: "circle 用胶囊圆角";
     }, {
         readonly name: "closable";
         readonly type: "boolean";
@@ -35,35 +37,32 @@ export declare const meta: {
         readonly name: "visible";
         readonly type: "boolean";
         readonly default: "undefined";
-        readonly desc: "受控显隐；false 不渲染。受控时不回写";
+        readonly desc: "受控显隐；受控时不回写，仅 onClose 通知";
     }, {
-        readonly name: "checkable";
+        readonly name: "colorful";
         readonly type: "boolean";
         readonly default: "false";
-        readonly desc: "可选中 chip(role=checkbox)";
+        readonly desc: "AI 多彩标签：蓝→紫渐变，字重更重";
     }, {
-        readonly name: "checked";
-        readonly type: "boolean";
-        readonly default: "undefined";
-        readonly desc: "受控选中态；受控时不回写，仅 onChange";
-    }, {
-        readonly name: "disabled";
+        readonly name: "gradient";
         readonly type: "boolean";
         readonly default: "false";
+        readonly desc: "渐变色，仅 colorful=true 时生效";
     }, {
-        readonly name: "onClose";
-        readonly type: "() => void";
+        readonly name: "avatarSrc";
+        readonly type: "string";
         readonly default: "undefined";
-        readonly desc: "关闭点击回调";
+        readonly desc: "头像型 Tag 的图片地址";
     }, {
-        readonly name: "onChange";
-        readonly type: "(checked: boolean) => void";
-        readonly default: "undefined";
+        readonly name: "avatarShape";
+        readonly type: "'square'|'circle'";
+        readonly default: "'square'";
+        readonly desc: "头像形状";
     }, {
-        readonly name: "children";
-        readonly type: "Snippet";
+        readonly name: "tagKey";
+        readonly type: "string|number";
         readonly default: "undefined";
-        readonly desc: "标签内容";
+        readonly desc: "在 TagGroup 中的稳定标识";
     }, {
         readonly name: "prefixIcon";
         readonly type: "Snippet";
@@ -75,30 +74,40 @@ export declare const meta: {
         readonly default: "undefined";
         readonly desc: "后置图标（关闭图标始终最右）";
     }, {
-        readonly name: "avatarSrc";
-        readonly type: "string";
+        readonly name: "children";
+        readonly type: "Snippet";
         readonly default: "undefined";
-        readonly desc: "头像型 Tag 的图片地址";
+        readonly desc: "标签内容";
     }, {
-        readonly name: "avatarShape";
-        readonly type: "'square'|'circle'";
-        readonly default: "'square'";
-        readonly desc: "头像形状";
+        readonly name: "onClose";
+        readonly type: "(tagChildren, e, tagKey) => void";
+        readonly default: "undefined";
+        readonly desc: "关闭回调；在回调内 e.preventDefault() 阻止默认隐藏";
     }, {
-        readonly name: "closeIcon";
-        readonly type: "Snippet";
+        readonly name: "onClick";
+        readonly type: "(e) => void";
         readonly default: "undefined";
-        readonly desc: "自定义关闭图标（默认内置 X）";
+        readonly desc: "单击回调；传入后标签变可交互(role=button/可聚焦/Enter 激活)";
     }, {
-        readonly name: "tagText";
-        readonly type: "string";
+        readonly name: "onMouseEnter";
+        readonly type: "(e) => void";
         readonly default: "undefined";
-        readonly desc: "标签纯文本，用于派生 closable 关闭按钮无障碍名（移除 <文本>）";
+        readonly desc: "鼠标进入回调";
     }, {
-        readonly name: "tagKey";
-        readonly type: "string|number";
+        readonly name: "onKeyDown";
+        readonly type: "(e) => void";
         readonly default: "undefined";
-        readonly desc: "在 TagGroup 中的稳定标识";
+        readonly desc: "键盘事件回调（内部处理后触发）";
+    }, {
+        readonly name: "tabIndex";
+        readonly type: "number";
+        readonly default: "undefined";
+        readonly desc: "可交互 Tag 的 tabIndex（TagInput 内用 -1）";
+    }, {
+        readonly name: "ariaLabel";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "透传根元素可访问名（aria-label）";
     }, {
         readonly name: "class";
         readonly type: "string";
@@ -112,10 +121,16 @@ export declare const meta: {
     }];
     readonly events: readonly [{
         readonly name: "onClose";
-        readonly desc: "关闭按钮点击";
+        readonly desc: "关闭按钮点击（tagChildren, e, tagKey）";
+    }, {
+        readonly name: "onClick";
+        readonly desc: "标签点击（clickable 时）";
+    }, {
+        readonly name: "onMouseEnter";
+        readonly desc: "鼠标进入";
     }, {
-        readonly name: "onChange";
-        readonly desc: "checkable 切换";
+        readonly name: "onKeyDown";
+        readonly desc: "键盘按下";
     }];
     readonly slots: readonly [{
         readonly name: "children";
@@ -126,26 +141,117 @@ export declare const meta: {
     }, {
         readonly name: "suffixIcon";
         readonly desc: "后置图标";
+    }];
+    readonly subComponents: readonly [{
+        readonly name: "TagGroup";
+        readonly usage: "<TagGroup tagList={...} maxTagCount={n} />，超出折叠为 +N";
+        readonly desc: "一组 Tag 成组渲染，超过 maxTagCount 折叠剩余为「+N」标签，showPopover 时 hover 在 Popover(showArrow/top) 弹层展示被折叠项。tagList 数据驱动。复用 Tag/Popover，严格对齐 Semi TagGroup。";
+        readonly props: readonly [{
+            readonly name: "tagList";
+            readonly type: "TagItem[]";
+            readonly default: "[]";
+            readonly desc: "数据驱动的标签数据；mode=custom 时每项含 tag Snippet 承载完整 Tag 节点";
+        }, {
+            readonly name: "mode";
+            readonly type: "'custom'";
+            readonly default: "undefined";
+            readonly desc: "渲染模式；'custom' 时每项由自带 tag Snippet 渲染 Tag 节点（对齐 Semi mode）";
+        }, {
+            readonly name: "maxTagCount";
+            readonly type: "number";
+            readonly default: "undefined";
+            readonly desc: "最大数量限制，超出折叠为 +N";
+        }, {
+            readonly name: "restCount";
+            readonly type: "number";
+            readonly default: "undefined";
+            readonly desc: "直接指定折叠数量（覆盖自动计算）";
+        }, {
+            readonly name: "size";
+            readonly type: "'small'|'default'|'large'";
+            readonly default: "'default'";
+            readonly desc: "标签尺寸（透传各 Tag）";
+        }, {
+            readonly name: "avatarShape";
+            readonly type: "'circle'|'square'";
+            readonly default: "undefined";
+            readonly desc: "标签内头像形状（透传）";
+        }, {
+            readonly name: "showPopover";
+            readonly type: "boolean";
+            readonly default: "false";
+            readonly desc: "hover +N 时是否 Popover 弹层展示剩余";
+        }, {
+            readonly name: "popoverProps";
+            readonly type: "PopoverProps";
+            readonly default: "undefined";
+            readonly desc: "弹层透传（复用本库 Popover）";
+        }, {
+            readonly name: "onTagClose";
+            readonly type: "(tagChildren, e, tagKey) => void";
+            readonly default: "undefined";
+            readonly desc: "删除某标签回调（对齐 Semi）";
+        }, {
+            readonly name: "onPlusNMouseEnter";
+            readonly type: "(e) => void";
+            readonly default: "undefined";
+            readonly desc: "鼠标进入 +N 回调";
+        }, {
+            readonly name: "class";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "透传根类名";
+        }, {
+            readonly name: "style";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "透传根内联样式";
+        }];
     }, {
-        readonly name: "closeIcon";
-        readonly desc: "自定义关闭图标";
+        readonly name: "SplitTagGroup";
+        readonly usage: "<SplitTagGroup><Tag>…</Tag><Tag>…</Tag></SplitTagGroup>";
+        readonly desc: "连接式标签组：多个 Tag 组合成整体（首子前缘圆角、末子后缘圆角、中间圆角为 0，相邻 1px 间隙），视觉上是一个分段控件。纯 CSS 装饰，无折叠；circle 子标签首末用胶囊圆角。严格对齐 Semi SplitTagGroup。";
+        readonly props: readonly [{
+            readonly name: "ariaLabel";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "组的可访问名（aria-label）";
+        }, {
+            readonly name: "class";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "透传根类名";
+        }, {
+            readonly name: "style";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "透传根内联样式";
+        }, {
+            readonly name: "children";
+            readonly type: "Snippet";
+            readonly default: "undefined";
+            readonly desc: "子 Tag（首尾自动加圆角、相邻合并边）";
+        }];
     }];
     readonly a11y: {
         readonly hasRole: true;
         readonly focusable: true;
-        readonly note: "checkable 时 role=checkbox + aria-checked，可键盘 Space/Enter 切换；关闭按钮 aria-label「关闭」。";
+        readonly note: "clickable（有 onClick 或 closable）时根 div role=button + tabIndex；Enter 激活 onClick、Delete/Backspace 关闭、Esc 失焦。";
     };
-    readonly tokens: readonly ["--cd-tag-height-default", "--cd-tag-height-small", "--cd-tag-height-large", "--cd-tag-padding-x", "--cd-tag-padding-y", "--cd-tag-padding-y-large", "--cd-tag-radius", "--cd-tag-font-size", "--cd-tag-gap"];
+    readonly tokens: readonly ["--cd-tag-height-small", "--cd-tag-height-large", "--cd-tag-radius", "--cd-tag-radius-circle", "--cd-tag-border-width", "--cd-tag-outline-width", "--cd-tag-outline-color", "--cd-tag-small-padding-y", "--cd-tag-small-padding-x", "--cd-tag-large-padding-y", "--cd-tag-large-padding-x", "--cd-tag-font-size", "--cd-tag-close-icon-default", "--cd-tag-close-icon-hover", "--cd-tag-close-icon-active", "--cd-tag-white-bg", "--cd-tag-white-border", "--cd-tag-white-text", "--cd-tag-avatar-bg", "--cd-tag-avatar-border", "--cd-tag-colorful-from", "--cd-tag-colorful-via", "--cd-tag-colorful-to"];
     readonly responsive: false;
     readonly examples: readonly [{
-        readonly title: "基础";
-        readonly code: "<Tag color=\"primary\">标签</Tag>";
+        readonly title: "基本";
+        readonly code: "<Tag color=\"blue\">标签</Tag>";
     }, {
         readonly title: "可关闭";
         readonly code: "<Tag closable onClose={() => {}}>关闭</Tag>";
     }, {
-        readonly title: "可选中";
-        readonly code: "<Tag checkable checked={on} onChange={(v) => (on = v)}>选中</Tag>";
+        readonly title: "头像";
+        readonly code: "<Tag avatarSrc={src}>焦锐志</Tag>";
+    }, {
+        readonly title: "AI 多彩";
+        readonly code: "<Tag colorful gradient type=\"solid\" shape=\"circle\">AI</Tag>";
     }];
 };
 //# sourceMappingURL=meta.d.ts.map

package/dist/tag/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/tag/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/tag/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8HP,CAAC"}

package/dist/tag/meta.js

@@ -1,93 +1,130 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
- * Tag — see specs/components/show/Tag.spec.md
+ * Tag — 严格对齐 Semi semi-ui/tag。
  */
 export const meta = {
     name: 'Tag',
     category: 'show',
-    description: '标签：light/solid/ghost 三态，五种语义色，可关闭(closable)与可选中(checkable)；受控 checked/visible 不回写，仅通过 onChange/onClose 通知。',
-    exports: ['Tag'],
+    semiEquivalent: 'Tag',
+    description: '标签：light/solid/ghost 三态，16 色板 + white，可关闭(closable)、可交互(onClick/keydown)、头像(avatarSrc)、AI 多彩(colorful/gradient)、前后缀图标。受控 visible 不回写，仅通过 onClose 通知。配套 TagGroup（折叠 +N）与 SplitTagGroup（连接式组合），对齐 Semi 同页三组件。',
+    exports: ['Tag', 'TagGroup', 'SplitTagGroup'],
     props: [
         { name: 'type', type: "'light'|'solid'|'ghost'", default: "'light'", desc: '视觉风格' },
         {
             name: 'color',
-            type: "'grey'|'primary'|'success'|'warning'|'danger'",
+            type: "'amber'|'blue'|'cyan'|'green'|'grey'|'indigo'|'light-blue'|'light-green'|'lime'|'orange'|'pink'|'purple'|'red'|'teal'|'violet'|'yellow'|'white'",
             default: "'grey'",
-            desc: '语义色',
+            desc: '语义色，对齐 Semi 16 色板 + white',
         },
-        { name: 'size', type: "'small'|'default'|'large'", default: "'default'" },
-        { name: 'shape', type: "'square'|'circle'", default: "'square'", desc: 'circle 用 full 圆角' },
+        { name: 'size', type: "'small'|'default'|'large'", default: "'default'", desc: 'default 与 small 同高' },
+        { name: 'shape', type: "'square'|'circle'", default: "'square'", desc: 'circle 用胶囊圆角' },
         { name: 'closable', type: 'boolean', default: 'false', desc: '尾部关闭按钮' },
         {
             name: 'visible',
             type: 'boolean',
             default: 'undefined',
-            desc: '受控显隐；false 不渲染。受控时不回写',
+            desc: '受控显隐；受控时不回写，仅 onClose 通知',
         },
-        { name: 'checkable', type: 'boolean', default: 'false', desc: '可选中 chip(role=checkbox)' },
-        {
-            name: 'checked',
-            type: 'boolean',
-            default: 'undefined',
-            desc: '受控选中态；受控时不回写，仅 onChange',
-        },
-        { name: 'disabled', type: 'boolean', default: 'false' },
-        { name: 'onClose', type: '() => void', default: 'undefined', desc: '关闭点击回调' },
-        { name: 'onChange', type: '(checked: boolean) => void', default: 'undefined' },
-        { name: 'children', type: 'Snippet', default: 'undefined', desc: '标签内容' },
+        { name: 'colorful', type: 'boolean', default: 'false', desc: 'AI 多彩标签：蓝→紫渐变，字重更重' },
+        { name: 'gradient', type: 'boolean', default: 'false', desc: '渐变色，仅 colorful=true 时生效' },
+        { name: 'avatarSrc', type: 'string', default: 'undefined', desc: '头像型 Tag 的图片地址' },
+        { name: 'avatarShape', type: "'square'|'circle'", default: "'square'", desc: '头像形状' },
+        { name: 'tagKey', type: 'string|number', default: 'undefined', desc: '在 TagGroup 中的稳定标识' },
         { name: 'prefixIcon', type: 'Snippet', default: 'undefined', desc: '前置图标' },
         { name: 'suffixIcon', type: 'Snippet', default: 'undefined', desc: '后置图标（关闭图标始终最右）' },
-        { name: 'avatarSrc', type: 'string', default: 'undefined', desc: '头像型 Tag 的图片地址' },
-        {
-            name: 'avatarShape',
-            type: "'square'|'circle'",
-            default: "'square'",
-            desc: '头像形状',
-        },
-        { name: 'closeIcon', type: 'Snippet', default: 'undefined', desc: '自定义关闭图标（默认内置 X）' },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: '标签内容' },
         {
-            name: 'tagText',
-            type: 'string',
+            name: 'onClose',
+            type: '(tagChildren, e, tagKey) => void',
             default: 'undefined',
-            desc: '标签纯文本，用于派生 closable 关闭按钮无障碍名（移除 <文本>）',
+            desc: '关闭回调；在回调内 e.preventDefault() 阻止默认隐藏',
         },
-        { name: 'tagKey', type: 'string|number', default: 'undefined', desc: '在 TagGroup 中的稳定标识' },
+        { name: 'onClick', type: '(e) => void', default: 'undefined', desc: '单击回调；传入后标签变可交互(role=button/可聚焦/Enter 激活)' },
+        { name: 'onMouseEnter', type: '(e) => void', default: 'undefined', desc: '鼠标进入回调' },
+        { name: 'onKeyDown', type: '(e) => void', default: 'undefined', desc: '键盘事件回调（内部处理后触发）' },
+        { name: 'tabIndex', type: 'number', default: 'undefined', desc: '可交互 Tag 的 tabIndex（TagInput 内用 -1）' },
+        { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '透传根元素可访问名（aria-label）' },
         { name: 'class', type: 'string', default: 'undefined', desc: '透传根类名' },
         { name: 'style', type: 'string', default: 'undefined', desc: '透传根内联样式' },
     ],
     events: [
-        { name: 'onClose', desc: '关闭按钮点击' },
-        { name: 'onChange', desc: 'checkable 切换' },
+        { name: 'onClose', desc: '关闭按钮点击（tagChildren, e, tagKey）' },
+        { name: 'onClick', desc: '标签点击（clickable 时）' },
+        { name: 'onMouseEnter', desc: '鼠标进入' },
+        { name: 'onKeyDown', desc: '键盘按下' },
     ],
     slots: [
         { name: 'children', desc: '标签文本/内容' },
         { name: 'prefixIcon', desc: '前置图标' },
         { name: 'suffixIcon', desc: '后置图标' },
-        { name: 'closeIcon', desc: '自定义关闭图标' },
+    ],
+    subComponents: [
+        {
+            name: 'TagGroup',
+            usage: '<TagGroup tagList={...} maxTagCount={n} />，超出折叠为 +N',
+            desc: '一组 Tag 成组渲染，超过 maxTagCount 折叠剩余为「+N」标签，showPopover 时 hover 在 Popover(showArrow/top) 弹层展示被折叠项。tagList 数据驱动。复用 Tag/Popover，严格对齐 Semi TagGroup。',
+            props: [
+                { name: 'tagList', type: 'TagItem[]', default: '[]', desc: '数据驱动的标签数据；mode=custom 时每项含 tag Snippet 承载完整 Tag 节点' },
+                { name: 'mode', type: "'custom'", default: 'undefined', desc: "渲染模式；'custom' 时每项由自带 tag Snippet 渲染 Tag 节点（对齐 Semi mode）" },
+                { name: 'maxTagCount', type: 'number', default: 'undefined', desc: '最大数量限制，超出折叠为 +N' },
+                { name: 'restCount', type: 'number', default: 'undefined', desc: '直接指定折叠数量（覆盖自动计算）' },
+                { name: 'size', type: "'small'|'default'|'large'", default: "'default'", desc: '标签尺寸（透传各 Tag）' },
+                { name: 'avatarShape', type: "'circle'|'square'", default: 'undefined', desc: '标签内头像形状（透传）' },
+                { name: 'showPopover', type: 'boolean', default: 'false', desc: 'hover +N 时是否 Popover 弹层展示剩余' },
+                { name: 'popoverProps', type: 'PopoverProps', default: 'undefined', desc: '弹层透传（复用本库 Popover）' },
+                { name: 'onTagClose', type: '(tagChildren, e, tagKey) => void', default: 'undefined', desc: '删除某标签回调（对齐 Semi）' },
+                { name: 'onPlusNMouseEnter', type: '(e) => void', default: 'undefined', desc: '鼠标进入 +N 回调' },
+                { name: 'class', type: 'string', default: 'undefined', desc: '透传根类名' },
+                { name: 'style', type: 'string', default: 'undefined', desc: '透传根内联样式' },
+            ],
+        },
+        {
+            name: 'SplitTagGroup',
+            usage: '<SplitTagGroup><Tag>…</Tag><Tag>…</Tag></SplitTagGroup>',
+            desc: '连接式标签组：多个 Tag 组合成整体（首子前缘圆角、末子后缘圆角、中间圆角为 0，相邻 1px 间隙），视觉上是一个分段控件。纯 CSS 装饰，无折叠；circle 子标签首末用胶囊圆角。严格对齐 Semi SplitTagGroup。',
+            props: [
+                { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '组的可访问名（aria-label）' },
+                { name: 'class', type: 'string', default: 'undefined', desc: '透传根类名' },
+                { name: 'style', type: 'string', default: 'undefined', desc: '透传根内联样式' },
+                { name: 'children', type: 'Snippet', default: 'undefined', desc: '子 Tag（首尾自动加圆角、相邻合并边）' },
+            ],
+        },
     ],
     a11y: {
         hasRole: true,
         focusable: true,
-        note: 'checkable 时 role=checkbox + aria-checked，可键盘 Space/Enter 切换；关闭按钮 aria-label「关闭」。',
+        note: 'clickable（有 onClick 或 closable）时根 div role=button + tabIndex；Enter 激活 onClick、Delete/Backspace 关闭、Esc 失焦。',
     },
     tokens: [
-        '--cd-tag-height-default',
         '--cd-tag-height-small',
         '--cd-tag-height-large',
-        '--cd-tag-padding-x',
-        '--cd-tag-padding-y',
-        '--cd-tag-padding-y-large',
         '--cd-tag-radius',
+        '--cd-tag-radius-circle',
+        '--cd-tag-border-width',
+        '--cd-tag-outline-width',
+        '--cd-tag-outline-color',
+        '--cd-tag-small-padding-y',
+        '--cd-tag-small-padding-x',
+        '--cd-tag-large-padding-y',
+        '--cd-tag-large-padding-x',
         '--cd-tag-font-size',
-        '--cd-tag-gap',
+        '--cd-tag-close-icon-default',
+        '--cd-tag-close-icon-hover',
+        '--cd-tag-close-icon-active',
+        '--cd-tag-white-bg',
+        '--cd-tag-white-border',
+        '--cd-tag-white-text',
+        '--cd-tag-avatar-bg',
+        '--cd-tag-avatar-border',
+        '--cd-tag-colorful-from',
+        '--cd-tag-colorful-via',
+        '--cd-tag-colorful-to',
     ],
     responsive: false,
     examples: [
-        { title: '基础', code: '<Tag color="primary">标签</Tag>' },
+        { title: '基本', code: '<Tag color="blue">标签</Tag>' },
         { title: '可关闭', code: '<Tag closable onClose={() => {}}>关闭</Tag>' },
-        {
-            title: '可选中',
-            code: '<Tag checkable checked={on} onChange={(v) => (on = v)}>选中</Tag>',
-        },
+        { title: '头像', code: '<Tag avatarSrc={src}>焦锐志</Tag>' },
+        { title: 'AI 多彩', code: '<Tag colorful gradient type="solid" shape="circle">AI</Tag>' },
     ],
 };