@icen.ai/ui 0.5.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +262 -0
- package/README.md +52 -13
- package/dist/base.css +33 -5
- package/dist/behaviors/accordion.d.mts +7 -0
- package/dist/behaviors/accordion.mjs +37 -11
- package/dist/behaviors/ai-chat.d.mts +59 -0
- package/dist/behaviors/ai-chat.mjs +580 -0
- package/dist/behaviors/ai-composer.d.mts +137 -0
- package/dist/behaviors/ai-composer.mjs +2114 -0
- package/dist/behaviors/ai-core.d.mts +156 -0
- package/dist/behaviors/ai-core.mjs +504 -0
- package/dist/behaviors/ai-diff.d.mts +53 -0
- package/dist/behaviors/ai-diff.mjs +413 -0
- package/dist/behaviors/ai-panel.d.mts +101 -0
- package/dist/behaviors/ai-panel.mjs +1087 -0
- package/dist/behaviors/ai-provider.d.mts +198 -0
- package/dist/behaviors/ai-provider.mjs +1061 -0
- package/dist/behaviors/ai-tool.d.mts +26 -0
- package/dist/behaviors/ai-tool.mjs +2173 -0
- package/dist/behaviors/ai-tools.d.mts +84 -0
- package/dist/behaviors/ai-tools.mjs +1762 -0
- package/dist/behaviors/back-top.d.mts +20 -0
- package/dist/behaviors/back-top.mjs +64 -32
- package/dist/behaviors/carousel.d.mts +7 -0
- package/dist/behaviors/carousel.mjs +72 -27
- package/dist/behaviors/charts.d.mts +296 -0
- package/dist/behaviors/charts.mjs +1364 -440
- package/dist/behaviors/command-palette.d.mts +42 -0
- package/dist/behaviors/command-palette.mjs +167 -27
- package/dist/behaviors/context-menu.d.mts +53 -0
- package/dist/behaviors/context-menu.mjs +127 -39
- package/dist/behaviors/controls.d.mts +59 -0
- package/dist/behaviors/controls.mjs +601 -0
- package/dist/behaviors/copy.d.mts +7 -0
- package/dist/behaviors/copy.mjs +41 -15
- package/dist/behaviors/datatable.d.mts +90 -0
- package/dist/behaviors/datatable.mjs +279 -53
- package/dist/behaviors/date-picker.d.mts +4 -0
- package/dist/behaviors/date-picker.mjs +276 -69
- package/dist/behaviors/dropdown.d.mts +8 -0
- package/dist/behaviors/dropdown.mjs +171 -28
- package/dist/behaviors/events.d.mts +330 -0
- package/dist/behaviors/events.mjs +208 -0
- package/dist/behaviors/input.d.mts +4 -0
- package/dist/behaviors/input.mjs +52 -32
- package/dist/behaviors/modal.d.mts +30 -0
- package/dist/behaviors/modal.mjs +87 -16
- package/dist/behaviors/nav.d.mts +7 -0
- package/dist/behaviors/nav.mjs +57 -15
- package/dist/behaviors/notification.d.mts +188 -0
- package/dist/behaviors/notification.mjs +274 -140
- package/dist/behaviors/popover.d.mts +82 -0
- package/dist/behaviors/popover.mjs +92 -5
- package/dist/behaviors/select.d.mts +6 -0
- package/dist/behaviors/select.mjs +287 -45
- package/dist/behaviors/sidebar.d.mts +7 -0
- package/dist/behaviors/sidebar.mjs +44 -13
- package/dist/behaviors/slider.d.mts +7 -0
- package/dist/behaviors/slider.mjs +55 -43
- package/dist/behaviors/split-pane.d.mts +8 -0
- package/dist/behaviors/split-pane.mjs +70 -29
- package/dist/behaviors/tabs.d.mts +9 -0
- package/dist/behaviors/tabs.mjs +102 -26
- package/dist/behaviors/tag-input.d.mts +7 -0
- package/dist/behaviors/tag-input.mjs +66 -17
- package/dist/behaviors/theme.d.mts +36 -0
- package/dist/behaviors/theme.mjs +51 -5
- package/dist/behaviors/toast.d.mts +48 -0
- package/dist/behaviors/toast.mjs +98 -25
- package/dist/behaviors/tree.d.mts +7 -0
- package/dist/behaviors/tree.mjs +39 -15
- package/dist/behaviors/upload.d.mts +4 -0
- package/dist/behaviors/upload.mjs +79 -44
- package/dist/cli.mjs +1 -1
- package/dist/components/ai-chat.css +1037 -0
- package/dist/components/ai-chat.mjs +3 -0
- package/dist/components/ai-composer.mjs +3 -0
- package/dist/components/ai-context.mjs +2 -0
- package/dist/components/ai-diff.css +311 -0
- package/dist/components/ai-diff.mjs +3 -0
- package/dist/components/ai-files.mjs +3 -0
- package/dist/components/ai-message.mjs +3 -0
- package/dist/components/ai-panel.css +682 -0
- package/dist/components/ai-reasoning.mjs +3 -0
- package/dist/components/ai-subagent.mjs +2 -0
- package/dist/components/ai-todo.mjs +2 -0
- package/dist/components/ai-tool-call.mjs +2 -0
- package/dist/components/ai-tool.css +532 -0
- package/dist/components/ai-usage.mjs +3 -0
- package/dist/components/badge.css +5 -9
- package/dist/components/breadcrumb.css +0 -36
- package/dist/components/btn.css +4 -7
- package/dist/components/card.css +3 -6
- package/dist/components/chart-bar.css +10 -0
- package/dist/components/chart-calendar.mjs +4 -0
- package/dist/components/chart-gauge.css +1 -1
- package/dist/components/chart-heatmap.css +40 -0
- package/dist/components/chart-pie.css +0 -6
- package/dist/components/chart-scatter.css +24 -0
- package/dist/components/chart-scatter.mjs +4 -0
- package/dist/components/charts.css +87 -2
- package/dist/components/charts.mjs +1 -0
- package/dist/components/command-palette.css +2 -2
- package/dist/components/content.css +11 -25
- package/dist/components/copy.css +8 -8
- package/dist/components/datatable.css +5 -9
- package/dist/components/date-picker.css +4 -8
- package/dist/components/empty.css +0 -4
- package/dist/components/feedback.css +10 -17
- package/dist/components/form.css +13 -14
- package/dist/components/input.css +2 -2
- package/dist/components/layout.css +36 -36
- package/dist/components/media.css +12 -8
- package/dist/components/menu.css +2 -2
- package/dist/components/modal.css +1 -1
- package/dist/components/nav.css +11 -6
- package/dist/components/notification.css +27 -28
- package/dist/components/pagination.css +4 -2
- package/dist/components/pagination.mjs +1 -0
- package/dist/components/panel.css +16 -16
- package/dist/components/pill.css +15 -15
- package/dist/components/rating.mjs +1 -0
- package/dist/components/segmented.css +14 -6
- package/dist/components/segmented.mjs +1 -0
- package/dist/components/select.css +79 -24
- package/dist/components/sidebar.css +1 -1
- package/dist/components/split-pane.css +0 -1
- package/dist/components/stat.css +14 -18
- package/dist/components/steps.css +15 -5
- package/dist/components/steps.mjs +1 -0
- package/dist/components/switch.css +11 -13
- package/dist/components/switch.mjs +1 -0
- package/dist/components/table.css +46 -47
- package/dist/components/table.mjs +1 -0
- package/dist/components/tabs.css +57 -45
- package/dist/components/tag-input.css +5 -10
- package/dist/components/toast.css +16 -13
- package/dist/components/tooltip.css +2 -2
- package/dist/components/upload.css +0 -15
- package/dist/index.d.mts +39 -0
- package/dist/index.mjs +11243 -3312
- package/dist/registry.json +147 -9
- package/dist/retro-effects.css +23 -32
- package/dist/tokens/colors.css +4 -1
- package/dist/tokens/retro-effects.css +23 -32
- package/dist/tokens/style-profiles.css +24 -2
- package/dist/tokens/typography.css +2 -0
- package/dist/tokens.css +30 -3
- package/dist/ui.css +3420 -645
- package/docs/spec/ai-native.md +662 -0
- package/package.json +15 -5
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* 完整契约:
|
|
5
5
|
* <div class="table-wrap [table-wrap--bordered]">
|
|
6
|
-
* <table class="
|
|
6
|
+
* <table class="table [--zebra|--compact|--dense] [--sticky-col]">
|
|
7
7
|
* <caption class="table-caption">标题说明</caption> ← 可选
|
|
8
8
|
* <thead>
|
|
9
9
|
* <tr><th [colspan=rowspan] [data-sort]>列名</th>…</tr>
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
* </div>
|
|
24
24
|
*
|
|
25
25
|
* .table-wrap:窄屏横向滚动(滚动条样式见 base.css);--bordered 加外边框。
|
|
26
|
-
* .
|
|
27
|
-
* .
|
|
28
|
-
* .
|
|
26
|
+
* .table--zebra:斑马纹(奇数行底色)。
|
|
27
|
+
* .table--compact:紧凑(cell padding 缩小);--dense:极紧凑(行高更紧)。
|
|
28
|
+
* .table--sticky-col:首列水平粘滞(配合 td/th .col-fixed,长表横向滚动时保持可见)。
|
|
29
29
|
* .row-expand[hidden]:配合 .row-link.is-expanded 控制展开行显隐。
|
|
30
30
|
*/
|
|
31
31
|
|
|
@@ -38,18 +38,18 @@
|
|
|
38
38
|
border: 1px solid var(--token-line-soft);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.
|
|
41
|
+
.table {
|
|
42
42
|
width: 100%;
|
|
43
43
|
border-collapse: collapse;
|
|
44
44
|
font-size: var(--density-font-size-md);
|
|
45
45
|
font-variant-numeric: tabular-nums;
|
|
46
46
|
}
|
|
47
|
-
.
|
|
48
|
-
.
|
|
47
|
+
.table th,
|
|
48
|
+
.table td {
|
|
49
49
|
padding: var(--density-space-sm) calc(var(--density-space-md) + 2px);
|
|
50
50
|
text-align: left;
|
|
51
51
|
}
|
|
52
|
-
.
|
|
52
|
+
.table th {
|
|
53
53
|
font-weight: 600;
|
|
54
54
|
font-size: var(--density-font-size-xs);
|
|
55
55
|
letter-spacing: 0.05em;
|
|
@@ -60,27 +60,27 @@
|
|
|
60
60
|
background: var(--token-bg-soft);
|
|
61
61
|
position: sticky;
|
|
62
62
|
top: 0;
|
|
63
|
-
z-index:
|
|
63
|
+
z-index: var(--z-raised);
|
|
64
64
|
}
|
|
65
|
-
.
|
|
65
|
+
.table td {
|
|
66
66
|
border-bottom: 1px solid var(--token-line-soft);
|
|
67
67
|
vertical-align: middle;
|
|
68
68
|
color: var(--token-text);
|
|
69
69
|
}
|
|
70
|
-
.
|
|
71
|
-
.
|
|
70
|
+
.table tbody tr:last-child td { border-bottom: 0; }
|
|
71
|
+
.table tbody tr {
|
|
72
72
|
transition: background-color var(--icen-tx-fast);
|
|
73
73
|
}
|
|
74
|
-
.
|
|
74
|
+
.table tbody tr:hover {
|
|
75
75
|
background: var(--token-surface-strong);
|
|
76
76
|
}
|
|
77
|
-
.
|
|
77
|
+
.table tbody tr.row-link {
|
|
78
78
|
cursor: pointer;
|
|
79
79
|
}
|
|
80
|
-
.
|
|
80
|
+
.table tbody tr.is-selected {
|
|
81
81
|
background: var(--token-accent-subtle);
|
|
82
82
|
}
|
|
83
|
-
.
|
|
83
|
+
.table tfoot td {
|
|
84
84
|
border-top: 1px solid var(--token-line);
|
|
85
85
|
border-bottom: 0;
|
|
86
86
|
font-weight: 500;
|
|
@@ -88,51 +88,50 @@
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
/* 紧凑变体 */
|
|
91
|
-
.
|
|
92
|
-
.
|
|
91
|
+
.table--compact th,
|
|
92
|
+
.table--compact td {
|
|
93
93
|
padding: var(--density-space-xs) var(--density-space-sm);
|
|
94
94
|
}
|
|
95
|
-
.
|
|
96
|
-
.
|
|
95
|
+
.table--dense th,
|
|
96
|
+
.table--dense td {
|
|
97
97
|
padding: 4px var(--density-space-xs);
|
|
98
98
|
font-size: var(--density-font-size-sm);
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
/* 右对齐数字列 */
|
|
102
|
-
.
|
|
102
|
+
.table td.num {
|
|
103
103
|
text-align: right;
|
|
104
104
|
font-variant-numeric: tabular-nums lining-nums;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
/*
|
|
108
|
-
.
|
|
107
|
+
/* 操作列(.btn-sm 必伴 .btn,无需单独列) */
|
|
108
|
+
.table .ops {
|
|
109
109
|
white-space: nowrap;
|
|
110
110
|
text-align: right;
|
|
111
111
|
}
|
|
112
|
-
.
|
|
113
|
-
.admin-table .ops .btn-sm {
|
|
112
|
+
.table .ops .btn {
|
|
114
113
|
margin-left: var(--density-space-xs);
|
|
115
114
|
}
|
|
116
115
|
|
|
117
116
|
/* 可排序表头(使用方 data-sort 指示) */
|
|
118
|
-
.
|
|
117
|
+
.table th[data-sort] {
|
|
119
118
|
cursor: pointer;
|
|
120
119
|
user-select: none;
|
|
121
120
|
}
|
|
122
|
-
.
|
|
121
|
+
.table th[data-sort]::after {
|
|
123
122
|
content: '↕';
|
|
124
123
|
margin-left: var(--density-space-xs);
|
|
125
124
|
color: var(--token-text-faint);
|
|
126
125
|
opacity: 0.6;
|
|
127
126
|
}
|
|
128
|
-
.
|
|
129
|
-
.
|
|
127
|
+
.table th[data-sort='asc']::after { content: '↑'; opacity: 1; color: var(--token-accent); }
|
|
128
|
+
.table th[data-sort='desc']::after { content: '↓'; opacity: 1; color: var(--token-accent); }
|
|
130
129
|
|
|
131
130
|
/* ── 斑马纹 ── */
|
|
132
|
-
.
|
|
131
|
+
.table--zebra tbody tr:nth-child(odd) {
|
|
133
132
|
background: color-mix(in srgb, var(--token-bg-soft) 50%, transparent);
|
|
134
133
|
}
|
|
135
|
-
.
|
|
134
|
+
.table--zebra tbody tr:hover {
|
|
136
135
|
background: var(--token-surface-strong);
|
|
137
136
|
}
|
|
138
137
|
|
|
@@ -147,30 +146,30 @@
|
|
|
147
146
|
}
|
|
148
147
|
|
|
149
148
|
/* ── 首列粘滞(长表横向滚动时保持可见) ── */
|
|
150
|
-
.
|
|
151
|
-
.
|
|
149
|
+
.table--sticky-col th:first-child,
|
|
150
|
+
.table--sticky-col .col-fixed {
|
|
152
151
|
position: sticky;
|
|
153
152
|
left: 0;
|
|
154
|
-
z-index:
|
|
153
|
+
z-index: calc(var(--z-raised) + 1);
|
|
155
154
|
background: var(--token-bg-soft);
|
|
156
|
-
box-shadow: 2px 0 4px color-mix(in srgb, var(--token-
|
|
155
|
+
box-shadow: 2px 0 4px color-mix(in srgb, var(--token-text) 5%, transparent);
|
|
157
156
|
}
|
|
158
|
-
.
|
|
157
|
+
.table--sticky-col tbody td.col-fixed {
|
|
159
158
|
background: var(--token-surface);
|
|
160
159
|
}
|
|
161
|
-
.
|
|
160
|
+
.table--sticky-col tbody tr:hover td.col-fixed {
|
|
162
161
|
background: var(--token-surface-strong);
|
|
163
162
|
}
|
|
164
163
|
|
|
165
164
|
/* ── 展开行 ── */
|
|
166
|
-
.
|
|
165
|
+
.table .row-expand > td {
|
|
167
166
|
padding: 0 var(--density-space-md);
|
|
168
167
|
background: var(--token-bg-soft);
|
|
169
168
|
border-bottom: 1px solid var(--token-line-soft);
|
|
170
169
|
font-size: var(--density-font-size-sm);
|
|
171
170
|
color: var(--token-text-muted);
|
|
172
171
|
}
|
|
173
|
-
.
|
|
172
|
+
.table .row-expand[hidden] { display: none; }
|
|
174
173
|
/* 展开行的内容容器(使用方可加 padding/动画) */
|
|
175
174
|
.row-expand-content {
|
|
176
175
|
padding: var(--density-space-sm) 0;
|
|
@@ -182,22 +181,22 @@
|
|
|
182
181
|
}
|
|
183
182
|
|
|
184
183
|
/* ── 列宽工具类 ── */
|
|
185
|
-
.
|
|
186
|
-
.
|
|
187
|
-
.
|
|
184
|
+
.table .col-narrow { width: 80px; }
|
|
185
|
+
.table .col-wide { width: 240px; }
|
|
186
|
+
.table .col-action { width: 1%; white-space: nowrap; }
|
|
188
187
|
|
|
189
188
|
/* ── 行状态色 ── */
|
|
190
|
-
.
|
|
191
|
-
.
|
|
192
|
-
.
|
|
189
|
+
.table tbody tr.row-success { background: color-mix(in srgb, var(--token-success) 6%, transparent); }
|
|
190
|
+
.table tbody tr.row-warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent); }
|
|
191
|
+
.table tbody tr.row-error { background: color-mix(in srgb, var(--token-error) 6%, transparent); }
|
|
193
192
|
|
|
194
193
|
/* ── 粘滞表头阴影提示 ── */
|
|
195
|
-
.
|
|
194
|
+
.table thead th {
|
|
196
195
|
box-shadow: 0 1px 0 var(--token-line);
|
|
197
196
|
}
|
|
198
197
|
|
|
199
198
|
/* ── 表头分组(rowspan/colspan 样式) ── */
|
|
200
|
-
.
|
|
199
|
+
.table th[rowspan] { vertical-align: bottom; }
|
|
201
200
|
|
|
202
201
|
@media (prefers-reduced-motion: reduce) {
|
|
203
202
|
.row-expand-content { animation: none; }
|
package/dist/components/tabs.css
CHANGED
|
@@ -2,20 +2,19 @@
|
|
|
2
2
|
* @icen.ai/ui — Component: tabs(分区导航 / 子导航)
|
|
3
3
|
*
|
|
4
4
|
* 完整契约:
|
|
5
|
-
* <div class="
|
|
6
|
-
* <button class="page-tab [.active]" role="tab" [aria-selected="true"]>…</button>
|
|
5
|
+
* <div class="tabs" role="tablist"> ← 页面内分区
|
|
6
|
+
* <button class="page-tab [.is-active]" role="tab" [aria-selected="true"]>…</button>
|
|
7
7
|
* </div>
|
|
8
8
|
*
|
|
9
|
-
* <nav class="
|
|
10
|
-
* <a class="[.active]" [aria-current="page"] href="…">…</a>
|
|
9
|
+
* <nav class="tabs" role="navigation"> ← 顶部子导航(a 链接)
|
|
10
|
+
* <a class="[.is-active]" [aria-current="page"] href="…">…</a>
|
|
11
11
|
* </nav>
|
|
12
12
|
*
|
|
13
13
|
* 与 behaviors/tabs 配套:[data-tabs] > [data-tab] + [data-tab-panel],行为层维护 aria。
|
|
14
|
-
*
|
|
14
|
+
* 窄屏换行不滚动(纪律:tab 条永不出现滚动条,一律 flex-wrap: wrap)。
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
|
-
.
|
|
18
|
-
.admin-tabs {
|
|
17
|
+
.tabs {
|
|
19
18
|
display: flex;
|
|
20
19
|
gap: 2px;
|
|
21
20
|
flex-wrap: wrap;
|
|
@@ -47,14 +46,14 @@
|
|
|
47
46
|
border-radius: var(--radius-sm);
|
|
48
47
|
box-shadow: var(--icen-ring);
|
|
49
48
|
}
|
|
50
|
-
.page-tab.active,
|
|
49
|
+
.page-tab.is-active,
|
|
51
50
|
.page-tab[aria-selected='true'] {
|
|
52
51
|
color: var(--token-accent);
|
|
53
52
|
border-bottom-color: var(--token-accent);
|
|
54
53
|
font-weight: 700;
|
|
55
54
|
}
|
|
56
55
|
|
|
57
|
-
.
|
|
56
|
+
.tabs a {
|
|
58
57
|
padding: var(--density-space-sm) var(--density-space-md);
|
|
59
58
|
font-size: var(--density-font-size-md);
|
|
60
59
|
color: var(--token-text-muted);
|
|
@@ -66,44 +65,44 @@
|
|
|
66
65
|
color var(--icen-tx-fast),
|
|
67
66
|
border-color var(--icen-tx-fast);
|
|
68
67
|
}
|
|
69
|
-
.
|
|
68
|
+
.tabs a:hover {
|
|
70
69
|
color: var(--token-accent);
|
|
71
70
|
text-decoration: none;
|
|
72
71
|
}
|
|
73
|
-
.
|
|
72
|
+
.tabs a:focus-visible {
|
|
74
73
|
outline: none;
|
|
75
74
|
border-radius: var(--radius-sm);
|
|
76
75
|
box-shadow: var(--icen-ring);
|
|
77
76
|
}
|
|
78
|
-
.
|
|
79
|
-
.
|
|
77
|
+
.tabs a.is-active,
|
|
78
|
+
.tabs a[aria-current='page'] {
|
|
80
79
|
color: var(--token-accent);
|
|
81
80
|
border-bottom-color: var(--token-accent);
|
|
82
81
|
}
|
|
83
82
|
|
|
84
|
-
/* 卡片变体(可选 .
|
|
85
|
-
.
|
|
83
|
+
/* 卡片变体(可选 .tabs--cards):tab 变成 pill,没有底边线 */
|
|
84
|
+
.tabs--cards {
|
|
86
85
|
border-bottom: 0;
|
|
87
86
|
gap: var(--density-space-xs);
|
|
88
87
|
margin-bottom: var(--density-space-md);
|
|
89
88
|
}
|
|
90
|
-
.
|
|
89
|
+
.tabs--cards .page-tab {
|
|
91
90
|
padding: var(--density-space-xs) var(--density-space-md);
|
|
92
91
|
border: 1px solid var(--token-outline-soft);
|
|
93
92
|
border-radius: var(--radius-full);
|
|
94
93
|
margin-bottom: 0;
|
|
95
94
|
}
|
|
96
|
-
.
|
|
97
|
-
.
|
|
95
|
+
.tabs--cards .page-tab.is-active,
|
|
96
|
+
.tabs--cards .page-tab[aria-selected='true'] {
|
|
98
97
|
background: var(--token-accent);
|
|
99
|
-
color: var(--token-on-accent
|
|
98
|
+
color: var(--token-on-accent);
|
|
100
99
|
border-color: var(--token-accent);
|
|
101
100
|
font-weight: 500;
|
|
102
101
|
}
|
|
103
102
|
|
|
104
103
|
/* 等宽变体:tab 平均占满容器 */
|
|
105
|
-
.
|
|
106
|
-
.
|
|
104
|
+
.tabs--equal .page-tab,
|
|
105
|
+
.tabs--equal a {
|
|
107
106
|
flex: 1;
|
|
108
107
|
text-align: center;
|
|
109
108
|
}
|
|
@@ -111,11 +110,11 @@
|
|
|
111
110
|
/* ── 增强 ── */
|
|
112
111
|
|
|
113
112
|
/* 尺寸变体 */
|
|
114
|
-
.
|
|
113
|
+
.tabs--sm .page-tab {
|
|
115
114
|
padding: var(--density-space-xs) var(--density-space-sm);
|
|
116
115
|
font-size: var(--density-font-size-sm);
|
|
117
116
|
}
|
|
118
|
-
.
|
|
117
|
+
.tabs--lg .page-tab {
|
|
119
118
|
padding: var(--density-space-md) calc(var(--density-space-md) + 4px);
|
|
120
119
|
font-size: var(--density-font-size-lg);
|
|
121
120
|
}
|
|
@@ -137,7 +136,7 @@
|
|
|
137
136
|
height: 18px;
|
|
138
137
|
padding: 0 5px;
|
|
139
138
|
margin-left: var(--density-space-xs);
|
|
140
|
-
font-size:
|
|
139
|
+
font-size: var(--density-font-size-2xs);
|
|
141
140
|
font-weight: 600;
|
|
142
141
|
color: var(--token-text-faint);
|
|
143
142
|
background: var(--token-fill-2);
|
|
@@ -145,10 +144,10 @@
|
|
|
145
144
|
font-variant-numeric: tabular-nums;
|
|
146
145
|
line-height: 1;
|
|
147
146
|
}
|
|
148
|
-
.page-tab.active .page-tab-badge,
|
|
147
|
+
.page-tab.is-active .page-tab-badge,
|
|
149
148
|
.page-tab[aria-selected='true'] .page-tab-badge {
|
|
150
149
|
background: var(--token-accent);
|
|
151
|
-
color: var(--token-on-accent
|
|
150
|
+
color: var(--token-on-accent);
|
|
152
151
|
}
|
|
153
152
|
|
|
154
153
|
/* 可关闭 tab */
|
|
@@ -175,7 +174,7 @@
|
|
|
175
174
|
.page-tab-close svg { width: 10px; height: 10px; }
|
|
176
175
|
|
|
177
176
|
/* 分段式 tab(替代底边线,用 segmented 视觉) */
|
|
178
|
-
.
|
|
177
|
+
.tabs--segment {
|
|
179
178
|
display: inline-flex;
|
|
180
179
|
border-bottom: none;
|
|
181
180
|
gap: 2px;
|
|
@@ -185,50 +184,63 @@
|
|
|
185
184
|
border-radius: var(--radius-md);
|
|
186
185
|
box-shadow: var(--token-shadow-inset);
|
|
187
186
|
}
|
|
188
|
-
.
|
|
187
|
+
.tabs--segment .page-tab {
|
|
189
188
|
border-bottom: none;
|
|
190
189
|
margin-bottom: 0;
|
|
191
190
|
padding: var(--density-space-xs) var(--density-space-md);
|
|
192
191
|
border-radius: var(--radius-sm);
|
|
193
192
|
}
|
|
194
|
-
.
|
|
195
|
-
.
|
|
193
|
+
.tabs--segment .page-tab.is-active,
|
|
194
|
+
.tabs--segment .page-tab[aria-selected='true'] {
|
|
196
195
|
background: var(--token-accent);
|
|
197
|
-
color: var(--token-on-accent
|
|
196
|
+
color: var(--token-on-accent);
|
|
198
197
|
border-bottom-color: transparent;
|
|
199
198
|
font-weight: 500;
|
|
200
199
|
}
|
|
201
200
|
|
|
202
201
|
/* 垂直 tab(侧栏式) */
|
|
203
|
-
.
|
|
202
|
+
.tabs--vertical {
|
|
204
203
|
flex-direction: column;
|
|
205
204
|
border-bottom: none;
|
|
206
205
|
border-right: 1px solid var(--token-line-soft);
|
|
207
206
|
margin-bottom: 0;
|
|
208
207
|
min-width: 160px;
|
|
209
208
|
}
|
|
210
|
-
.
|
|
209
|
+
.tabs--vertical .page-tab {
|
|
211
210
|
border-bottom: none;
|
|
212
211
|
border-right: 2px solid transparent;
|
|
213
212
|
margin-bottom: 0;
|
|
214
213
|
margin-right: -1px;
|
|
215
214
|
}
|
|
216
|
-
.
|
|
217
|
-
.
|
|
215
|
+
.tabs--vertical .page-tab.is-active,
|
|
216
|
+
.tabs--vertical .page-tab[aria-selected='true'] {
|
|
218
217
|
border-right-color: var(--token-accent);
|
|
219
218
|
border-bottom-color: transparent;
|
|
220
219
|
}
|
|
221
220
|
|
|
222
|
-
|
|
223
|
-
.page-tabs
|
|
224
|
-
|
|
225
|
-
overflow-x: auto;
|
|
226
|
-
overflow-y: hidden;
|
|
227
|
-
scrollbar-width: none;
|
|
228
|
-
-ms-overflow-style: none;
|
|
229
|
-
}
|
|
230
|
-
.page-tabs--scroll::-webkit-scrollbar { display: none; }
|
|
221
|
+
@media (prefers-reduced-motion: reduce) {
|
|
222
|
+
.page-tab, .tabs a, .page-tab-close { transition: none; }
|
|
223
|
+
}
|
|
231
224
|
|
|
225
|
+
/* ── 指示条([data-tabs-ink],与 behaviors/tabs 配套;本节为追加)── */
|
|
226
|
+
/* tablist(.tabs)挂 data-tabs-ink 时,行为层创建并移动 .tabs-ink:
|
|
227
|
+
宽 / translateX 由 JS 内联写入(布局定位,同 popover 模式);
|
|
228
|
+
此处只负责视觉(高度 / 圆角 / 背景)与位移过渡(--duration / --ease token)。 */
|
|
229
|
+
.tabs[data-tabs-ink] {
|
|
230
|
+
position: relative;
|
|
231
|
+
}
|
|
232
|
+
.tabs-ink {
|
|
233
|
+
position: absolute;
|
|
234
|
+
bottom: -1px; /* 盖在容器 1px 底边线上,与活动 tab 的 2px 下划线同高 */
|
|
235
|
+
left: 0;
|
|
236
|
+
height: 2px;
|
|
237
|
+
border-radius: var(--radius-full);
|
|
238
|
+
background: var(--token-accent);
|
|
239
|
+
pointer-events: none;
|
|
240
|
+
transition:
|
|
241
|
+
width var(--duration-normal) var(--ease-out),
|
|
242
|
+
transform var(--duration-normal) var(--ease-out);
|
|
243
|
+
}
|
|
232
244
|
@media (prefers-reduced-motion: reduce) {
|
|
233
|
-
.
|
|
245
|
+
.tabs-ink { transition: none; }
|
|
234
246
|
}
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
.tag-input.is-max,
|
|
41
41
|
.tag-input.is-max:focus-within {
|
|
42
42
|
border-color: color-mix(in srgb, var(--token-warning) 60%, transparent);
|
|
43
|
-
box-shadow:
|
|
43
|
+
box-shadow: var(--icen-ring-warning);
|
|
44
44
|
}
|
|
45
45
|
.tag-input.is-disabled,
|
|
46
46
|
.tag-input[aria-disabled='true'],
|
|
@@ -70,12 +70,7 @@
|
|
|
70
70
|
max-width: 100%;
|
|
71
71
|
animation: tag-pop var(--icen-tx-fast);
|
|
72
72
|
}
|
|
73
|
-
|
|
74
|
-
white-space: nowrap;
|
|
75
|
-
overflow: hidden;
|
|
76
|
-
text-overflow: ellipsis;
|
|
77
|
-
max-width: 200px;
|
|
78
|
-
}
|
|
73
|
+
/* readonly 变体(消费方手写标记,behavior 不产出) */
|
|
79
74
|
.tag-chip--readonly { background: var(--token-fill-2); color: var(--token-text-muted); }
|
|
80
75
|
|
|
81
76
|
@keyframes tag-pop {
|
|
@@ -98,7 +93,7 @@
|
|
|
98
93
|
cursor: pointer;
|
|
99
94
|
border-radius: var(--radius-full);
|
|
100
95
|
color: inherit;
|
|
101
|
-
font-size:
|
|
96
|
+
font-size: var(--density-font-size-xs);
|
|
102
97
|
line-height: 1;
|
|
103
98
|
opacity: 0.7;
|
|
104
99
|
transition:
|
|
@@ -109,7 +104,7 @@
|
|
|
109
104
|
.tag-chip-x:hover {
|
|
110
105
|
opacity: 1;
|
|
111
106
|
background: color-mix(in srgb, currentColor 18%, transparent);
|
|
112
|
-
color: var(--token-on-accent
|
|
107
|
+
color: var(--token-on-accent);
|
|
113
108
|
}
|
|
114
109
|
.tag-chip-x:focus-visible {
|
|
115
110
|
outline: none;
|
|
@@ -135,7 +130,7 @@
|
|
|
135
130
|
|
|
136
131
|
/* 重复值抖动反馈(behavior 短暂挂 is-shake) */
|
|
137
132
|
.tag-input.is-shake {
|
|
138
|
-
animation: tag-shake 0.32s var(--ease-out);
|
|
133
|
+
animation: tag-shake var(--tag-shake-duration, 0.32s) var(--ease-out);
|
|
139
134
|
}
|
|
140
135
|
@keyframes tag-shake {
|
|
141
136
|
0%, 100% { transform: translateX(0); }
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*
|
|
6
6
|
* 完整契约:
|
|
7
7
|
* <div class="toast-container" role="status" aria-live="polite">
|
|
8
|
-
* <div class="toast [
|
|
8
|
+
* <div class="toast [toast--success|toast--error|toast--warning|toast--info]" role="status|alert">
|
|
9
9
|
* <span class="toast-msg">文本</span>
|
|
10
10
|
* <button class="toast-action">撤销</button> ← 可选 action
|
|
11
11
|
* </div>
|
|
@@ -28,6 +28,8 @@
|
|
|
28
28
|
|
|
29
29
|
.toast {
|
|
30
30
|
pointer-events: auto;
|
|
31
|
+
position: relative;
|
|
32
|
+
overflow: hidden;
|
|
31
33
|
display: inline-flex;
|
|
32
34
|
align-items: center;
|
|
33
35
|
gap: var(--density-space-sm);
|
|
@@ -45,9 +47,10 @@
|
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
/* 语义色:左缘 3px 强调 */
|
|
48
|
-
.toast
|
|
49
|
-
.toast
|
|
50
|
-
.toast
|
|
50
|
+
.toast--success { border-left-color: var(--token-success); }
|
|
51
|
+
.toast--error { border-left-color: var(--token-error); }
|
|
52
|
+
.toast--warning { border-left-color: var(--token-warning); }
|
|
53
|
+
.toast--info { border-left-color: var(--token-info); }
|
|
51
54
|
|
|
52
55
|
.toast-msg {
|
|
53
56
|
flex: 1;
|
|
@@ -88,9 +91,10 @@
|
|
|
88
91
|
color: var(--token-text-faint);
|
|
89
92
|
}
|
|
90
93
|
.toast-icon svg { width: 16px; height: 16px; }
|
|
91
|
-
.toast
|
|
92
|
-
.toast.
|
|
93
|
-
.toast
|
|
94
|
+
.toast--success .toast-icon { color: var(--token-success); }
|
|
95
|
+
.toast--error .toast-icon { color: var(--token-error); }
|
|
96
|
+
.toast--warning .toast-icon { color: var(--token-warning); }
|
|
97
|
+
.toast--info .toast-icon { color: var(--token-info); }
|
|
94
98
|
|
|
95
99
|
/* 关闭按钮 */
|
|
96
100
|
.toast-close {
|
|
@@ -149,16 +153,15 @@
|
|
|
149
153
|
transform-origin: left;
|
|
150
154
|
animation: toast-countdown linear forwards;
|
|
151
155
|
}
|
|
152
|
-
.toast
|
|
153
|
-
.toast.
|
|
154
|
-
.toast
|
|
156
|
+
.toast--success .toast-progress-fill { background: var(--token-success); }
|
|
157
|
+
.toast--error .toast-progress-fill { background: var(--token-error); }
|
|
158
|
+
.toast--warning .toast-progress-fill { background: var(--token-warning); }
|
|
159
|
+
.toast--info .toast-progress-fill { background: var(--token-info); }
|
|
155
160
|
@keyframes toast-countdown {
|
|
156
161
|
from { transform: scaleX(1); }
|
|
157
162
|
to { transform: scaleX(0); }
|
|
158
163
|
}
|
|
159
164
|
|
|
160
|
-
.toast { position: relative; overflow: hidden; }
|
|
161
|
-
|
|
162
165
|
/* 容器定位变体 */
|
|
163
166
|
.toast-container[data-position='top-left'] {
|
|
164
167
|
right: auto;
|
|
@@ -191,7 +194,7 @@
|
|
|
191
194
|
align-items: center;
|
|
192
195
|
}
|
|
193
196
|
|
|
194
|
-
.toast.leaving {
|
|
197
|
+
.toast.is-leaving {
|
|
195
198
|
opacity: 0;
|
|
196
199
|
transform: translateY(8px);
|
|
197
200
|
transition:
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* 无障碍:键盘 :focus-visible 立即出现(无延迟),鼠标 hover 延迟 400ms。
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
[data-tooltip] { position: relative; }
|
|
10
|
+
[data-tooltip] { position: relative; --tooltip-delay: 400ms; }
|
|
11
11
|
|
|
12
12
|
[data-tooltip]::after {
|
|
13
13
|
content: attr(data-tooltip);
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
transition:
|
|
33
33
|
opacity var(--icen-tx-fast),
|
|
34
34
|
transform var(--icen-tx-fast);
|
|
35
|
-
transition-delay:
|
|
35
|
+
transition-delay: var(--tooltip-delay);
|
|
36
36
|
|
|
37
37
|
/* 默认:上方、水平居中 */
|
|
38
38
|
bottom: calc(100% + 6px);
|
|
@@ -195,21 +195,6 @@
|
|
|
195
195
|
box-shadow: var(--icen-ring);
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
/* 进度条(behavior 可选注入 .upload-list-item-progress) */
|
|
199
|
-
.upload-list-item-progress {
|
|
200
|
-
height: 2px;
|
|
201
|
-
width: 100%;
|
|
202
|
-
background: var(--token-fill-2);
|
|
203
|
-
border-radius: var(--radius-full);
|
|
204
|
-
overflow: hidden;
|
|
205
|
-
margin-top: 2px;
|
|
206
|
-
}
|
|
207
|
-
.upload-list-item-progress-bar {
|
|
208
|
-
height: 100%;
|
|
209
|
-
background: var(--token-accent);
|
|
210
|
-
border-radius: var(--radius-full);
|
|
211
|
-
transition: width var(--icen-tx-normal) var(--ease-out);
|
|
212
|
-
}
|
|
213
198
|
.upload-list-item.is-error {
|
|
214
199
|
border-color: var(--token-error);
|
|
215
200
|
}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export { PRESETS, STORAGE_KEY, STYLES, ThemeState, applyTheme, getDefaultTheme, getTheme, initTheme, listThemePresets, registerThemePreset, setStyle, setTheme, toggleDark } from './behaviors/theme.js';
|
|
2
|
+
export { IcenEventMap, IcenGestureDetail, IcenGestureEvent, IcenListenOptions, IcenPolicy, destroyGestures, emitIcen, getEventPolicy, initGestures, onIcen, resetEventPolicies, setEventPolicy } from './behaviors/events.js';
|
|
3
|
+
export { ToastConfig, ToastHandle, ToastKind, ToastOptions, toast } from './behaviors/toast.js';
|
|
4
|
+
export { initTabs } from './behaviors/tabs.js';
|
|
5
|
+
export { initCopy } from './behaviors/copy.js';
|
|
6
|
+
export { initInput } from './behaviors/input.js';
|
|
7
|
+
export { initPagination, initRating, initSegmented, initStepper, initSteps, initSwitch, initTableSort } from './behaviors/controls.js';
|
|
8
|
+
export { initSelect } from './behaviors/select.js';
|
|
9
|
+
export { initSlider } from './behaviors/slider.js';
|
|
10
|
+
export { initTagInput } from './behaviors/tag-input.js';
|
|
11
|
+
export { initUpload } from './behaviors/upload.js';
|
|
12
|
+
export { FOCUSABLE, ModalOpenOptions, closeModal, initModal, openModal } from './behaviors/modal.js';
|
|
13
|
+
export { initDropdown } from './behaviors/dropdown.js';
|
|
14
|
+
export { ContextMenuEntry, ContextMenuHeader, ContextMenuItem, ContextMenuOptions, ContextMenuSeparator, closeContextMenu, closeMenu, emitMenuSelect, initContextMenu, openContextMenu, registerContextMenu } from './behaviors/context-menu.js';
|
|
15
|
+
export { OpenPopoverOptions, PanelSizing, PopoverAlign, PopoverLayout, PopoverLayoutOptions, PopoverRect, PopoverSide, PopoverViewport, applyPanelSizing, closePopover, computePopoverLayout, openPopover, readPanelSizing, resolvePanelSizing, sizingToLayout } from './behaviors/popover.js';
|
|
16
|
+
export { initAccordion } from './behaviors/accordion.js';
|
|
17
|
+
export { initTree } from './behaviors/tree.js';
|
|
18
|
+
export { initCarousel } from './behaviors/carousel.js';
|
|
19
|
+
export { ChartCalendarOptions, ChartChromeOptions, ChartDims, ChartEventDetail, ChartEventName, ChartGaugeOptions, ChartHandle, ChartHeatmapOptions, ChartI18nLabels, ChartLineOptions, ChartMarkData, ChartPointSpec, ChartRadarOptions, ChartScatterOptions, ChartSegment, ChartSegmentsOptions, ChartSeriesOptions, ChartSeriesSpec, ChartSpec, ChartTone, ChartType, ChartVBarOptions, ChartValueFormat, HeatmapDatum, RadarSeries, bindChartEvents, chartFormatValue, inferChartType, normalizeChartSpec, registerChartTone, renderArea, renderCalendar, renderChart, renderDonut, renderGauge, renderHBar, renderHeatmap, renderLine, renderRadar, renderScatter, renderSparkline, renderStack, renderVBar } from './behaviors/charts.js';
|
|
20
|
+
export { initNav } from './behaviors/nav.js';
|
|
21
|
+
export { initSidebar } from './behaviors/sidebar.js';
|
|
22
|
+
export { NotificationAction, NotificationCenterHandle, NotificationConfig, NotificationConfirmOptions, NotificationHandle, NotificationKind, NotificationOptions, NotificationPushInput, NotificationRecord, NotificationUpdatePatch, createNotificationCenter, initNotification, notify } from './behaviors/notification.js';
|
|
23
|
+
export { initBackTop } from './behaviors/back-top.js';
|
|
24
|
+
export { CommandPaletteCommand, CommandPaletteOpenOptions, closeCommandPalette, initCommandPalette, openCommandPalette } from './behaviors/command-palette.js';
|
|
25
|
+
export { initDatePicker } from './behaviors/date-picker.js';
|
|
26
|
+
export { initSplitPane } from './behaviors/split-pane.js';
|
|
27
|
+
export { TableColumn, TableHandle, TableOptions, createTable } from './behaviors/datatable.js';
|
|
28
|
+
export { AI_STATUSES, AiAudioPart, AiContent, AiContentPart, AiFilePart, AiImagePart, AiKindDef, AiKindTint, AiMediaPart, AiResourceLinkPart, AiStatus, AiTextPart, AiToolCallModel, AiUsage, AiVideoPart, addUsage, aiContentUrl, aiStatusLabel, contentToText, contextEstimate, estimateTokens, formatDuration, formatTokens, getAiKind, h, inferKind, isAiContentPart, normalizeContentParts, normalizeMcpContent, normalizeToolCall, normalizeUsage, registerAiKind, svgIcon } from './behaviors/ai-core.js';
|
|
29
|
+
export { AiMessageHandle, AiMessageModel, AiStreamHandle, createAiStream, initAiChat, renderAiContentPart, renderAiMessage } from './behaviors/ai-chat.js';
|
|
30
|
+
export { AiComposerBindOpts, AiComposerBinding, AiComposerCommand, AiComposerCurrentModel, AiComposerRefDef, AiComposerRefKind, AiComposerRefSource, AiProviderModelOption, AiProviderOption, bindComposer, initAiComposer, registerRefKind, setComposerCommands, setComposerModels, setComposerRefs, setComposerRunning, setComposerTodo, setComposerUsage } from './behaviors/ai-composer.js';
|
|
31
|
+
export { AiSubagentHandle, AiToolCallHandle, initAiSubagent, initAiTool, renderAiSubagent, renderAiToolCall } from './behaviors/ai-tool.js';
|
|
32
|
+
export { AiDiffFile, AiDiffFileStatus, AiDiffHunk, AiDiffLine, AiDiffModel, initAiDiff, parseUnifiedDiff, renderAiDiff } from './behaviors/ai-diff.js';
|
|
33
|
+
export { AiAuditRenderOpts, AiContextFile, AiContextMcpServer, AiContextModel, AiContextSkill, AiTodoItem, AiUsageRenderOpts, AiUsageRingOpts, initAiContext, initAiTodo, renderAiAudit, renderAiContext, renderAiTodo, renderAiUsage, renderAiUsageRing } from './behaviors/ai-panel.js';
|
|
34
|
+
export { AiAuditEntry, AiAuditTotals, AiAuditor, AiAuditorOptions, AiChatMessage, AiChatRequest, AiChatResult, AiChatRole, AiClient, AiClientConfig, AiClientOptions, AiDoneEventDetail, AiPricing, AiProviderDef, AiProviderError, AiProviderModel, AiStreamChunk, AiStreamSession, createAiAuditor, createAiClient, estimateCost, getAiProvider, listAiProviders, registerAiProvider } from './behaviors/ai-provider.js';
|
|
35
|
+
export { AiToolArea, AiToolAreaOptions, AiToolDef, AiToolRecord, aiToolsManifest, aiToolsToMcp, aiToolsToOpenAI, createAiToolArea, getAiTool, listAiTools, parseAiToolArgs, registerAiTool, unregisterAiTool } from './behaviors/ai-tools.js';
|
|
36
|
+
|
|
37
|
+
declare const VERSION: string;
|
|
38
|
+
|
|
39
|
+
export { VERSION };
|