@opencode/ui 2.0.27 → 2.0.29
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/dist/context/dialog.d.ts +7 -0
- package/dist/data-display/badge/badge.d.ts +1 -1
- package/dist/i18n/en.d.ts +3 -0
- package/package.json +1 -1
- package/src/actions/button/button.css +260 -243
- package/src/actions/icon-button/icon-button.css +125 -117
- package/src/actions/submit.css +58 -53
- package/src/context/dialog.tsx +70 -4
- package/src/data-display/badge/badge.css +5 -0
- package/src/data-display/badge/badge.tsx +1 -1
- package/src/forms/text-input/text-input.css +185 -180
- package/src/i18n/en.ts +3 -0
- package/src/overlays/dialog/dialog.tsx +5 -3
|
@@ -1,181 +1,186 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
[data-component="text-input-v2"]
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
[data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
[data-component="text-input-v2"] [data-slot="text-input-v2-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
[data-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
[data-
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
1
|
+
/* Vite can link this before the app entry CSS, so name every layer here or `components` ranks below Tailwind's base reset. */
|
|
2
|
+
@layer properties, theme, base, components, utilities;
|
|
3
|
+
|
|
4
|
+
@layer components {
|
|
5
|
+
[data-component="text-input-v2"] {
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: row;
|
|
9
|
+
align-items: stretch;
|
|
10
|
+
padding-block: 0;
|
|
11
|
+
padding-inline: 0 8px;
|
|
12
|
+
gap: 8px;
|
|
13
|
+
width: 280px;
|
|
14
|
+
height: 28px;
|
|
15
|
+
border: 0;
|
|
16
|
+
border-radius: 6px;
|
|
17
|
+
outline: 1px solid transparent;
|
|
18
|
+
outline-offset: 0;
|
|
19
|
+
background:
|
|
20
|
+
linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
|
|
21
|
+
box-shadow: var(--v2-elevation-button-neutral);
|
|
22
|
+
flex: none;
|
|
23
|
+
align-self: stretch;
|
|
24
|
+
transition:
|
|
25
|
+
background 85ms ease-out,
|
|
26
|
+
outline-color 85ms ease-out,
|
|
27
|
+
box-shadow 85ms ease-out;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
[data-component="text-input-v2"][data-appearance="large"] {
|
|
31
|
+
height: 32px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
[data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
|
|
35
|
+
background:
|
|
36
|
+
linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
|
|
37
|
+
linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
|
|
41
|
+
outline-color: var(--v2-border-border-focus);
|
|
42
|
+
box-shadow: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
[data-component="text-input-v2"]:where([data-invalid]):not([data-disabled]) {
|
|
46
|
+
outline-color: var(--v2-state-fg-danger);
|
|
47
|
+
box-shadow: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[data-component="text-input-v2"]:where([data-disabled]) {
|
|
51
|
+
opacity: 0.5;
|
|
52
|
+
cursor: not-allowed;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-value"] {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: row;
|
|
58
|
+
align-items: center;
|
|
59
|
+
align-self: stretch;
|
|
60
|
+
padding: 0;
|
|
61
|
+
gap: 6px;
|
|
62
|
+
min-width: 0;
|
|
63
|
+
flex: 1 1 auto;
|
|
64
|
+
min-height: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
|
|
68
|
+
display: flex;
|
|
69
|
+
flex: none;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
padding-inline-start: 8px;
|
|
73
|
+
color: var(--v2-icon-icon-muted);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] :is(svg, [data-slot="icon-svg"]) {
|
|
77
|
+
display: block;
|
|
78
|
+
flex: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
[data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
|
|
82
|
+
padding-inline-start: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
|
|
86
|
+
display: block;
|
|
87
|
+
width: 100%;
|
|
88
|
+
min-width: 0;
|
|
89
|
+
height: 100%;
|
|
90
|
+
padding-block: 0;
|
|
91
|
+
padding-inline: 8px 0;
|
|
92
|
+
margin: 0;
|
|
93
|
+
border: 0;
|
|
94
|
+
background: transparent;
|
|
95
|
+
outline: none;
|
|
96
|
+
font-style: normal;
|
|
97
|
+
font-weight: 440;
|
|
98
|
+
font-size: 13px;
|
|
99
|
+
line-height: var(--line-height-compact);
|
|
100
|
+
letter-spacing: -0.04px;
|
|
101
|
+
color: var(--v2-text-text-base);
|
|
102
|
+
font-variation-settings: "slnt" 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-input"]::placeholder {
|
|
106
|
+
color: var(--v2-text-text-faint);
|
|
107
|
+
user-select: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button {
|
|
111
|
+
-webkit-appearance: none;
|
|
112
|
+
appearance: none;
|
|
113
|
+
display: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
[data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
|
|
117
|
+
font-variant-numeric: tabular-nums;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] {
|
|
121
|
+
display: flex;
|
|
122
|
+
flex-direction: row;
|
|
123
|
+
justify-content: center;
|
|
124
|
+
align-items: center;
|
|
125
|
+
align-self: center;
|
|
126
|
+
flex: none;
|
|
127
|
+
width: 20px;
|
|
128
|
+
height: 20px;
|
|
129
|
+
padding: 2px;
|
|
130
|
+
gap: 3px;
|
|
131
|
+
border: 0;
|
|
132
|
+
border-radius: 4px;
|
|
133
|
+
background: transparent;
|
|
134
|
+
color: var(--v2-icon-icon-muted);
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
outline: none;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
[data-component="text-input-v2"]
|
|
140
|
+
[data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
|
|
141
|
+
background-color: var(--v2-overlay-simple-overlay-hover);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
[data-component="text-input-v2"]
|
|
145
|
+
[data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
|
|
146
|
+
background-color: var(--v2-overlay-simple-overlay-pressed);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus {
|
|
150
|
+
outline: none;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus-visible {
|
|
154
|
+
outline: 2px solid var(--v2-border-border-focus);
|
|
155
|
+
outline-offset: 1px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
[data-component="text-input-v2"]:where([data-disabled]) [data-slot="text-input-v2-icon-button"] {
|
|
159
|
+
cursor: not-allowed;
|
|
160
|
+
pointer-events: none;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] [data-slot="icon-svg"] {
|
|
164
|
+
display: block;
|
|
165
|
+
flex: none;
|
|
166
|
+
color: currentColor;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
|
|
170
|
+
width: 28px;
|
|
171
|
+
height: 28px;
|
|
172
|
+
padding: 0;
|
|
173
|
+
border-radius: 6px;
|
|
174
|
+
margin-inline-end: -8px;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
|
|
178
|
+
color: var(--v2-state-fg-danger);
|
|
179
|
+
caret-color: var(--v2-state-fg-danger);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"]::placeholder {
|
|
183
|
+
color: var(--v2-state-fg-danger);
|
|
184
|
+
opacity: 1;
|
|
185
|
+
}
|
|
181
186
|
}
|
package/src/i18n/en.ts
CHANGED
|
@@ -255,6 +255,8 @@ const source = {
|
|
|
255
255
|
"ui.message.modelVariant": "{{model}} ({{variant}})",
|
|
256
256
|
"ui.sessionTimeline.notice.model": "Model",
|
|
257
257
|
"ui.sessionTimeline.notice.modelSwitched": "Switched to {{model}}",
|
|
258
|
+
"ui.sessionTimeline.notice.variantSwitched": "Switched variant to {{variant}}",
|
|
259
|
+
"ui.sessionTimeline.notice.variantDefault": "Switched variant to Default",
|
|
258
260
|
"ui.sessionTimeline.notice.agentChanged": "Agent changed",
|
|
259
261
|
"ui.sessionTimeline.notice.movedTo": "Moved to",
|
|
260
262
|
"ui.sessionTimeline.notice.movedTooltip": "Session working directory changed",
|
|
@@ -277,6 +279,7 @@ const source = {
|
|
|
277
279
|
"ui.question.multiHint": "Select all answers that apply",
|
|
278
280
|
"ui.question.singleHint": "Select one answer",
|
|
279
281
|
"ui.question.custom.placeholder": "Type your answer…",
|
|
282
|
+
"ui.question.custom.answerPlaceholder": "Type your own answer…",
|
|
280
283
|
} satisfies Record<string, string>
|
|
281
284
|
|
|
282
285
|
export type Key = keyof typeof source
|
|
@@ -120,12 +120,14 @@ export function Dialog(props: DialogProps) {
|
|
|
120
120
|
[local.class ?? ""]: !!local.class,
|
|
121
121
|
}}
|
|
122
122
|
onOpenAutoFocus={(e) => {
|
|
123
|
-
const
|
|
124
|
-
|
|
123
|
+
const autofocusEl =
|
|
124
|
+
e.currentTarget instanceof HTMLElement ? e.currentTarget.querySelector<HTMLElement>("[autofocus]") : null
|
|
125
125
|
|
|
126
126
|
if (autofocusEl) {
|
|
127
127
|
e.preventDefault()
|
|
128
|
-
|
|
128
|
+
// Kobalte attaches its focus trap after this event, so focusing now would leave the trap with no
|
|
129
|
+
// element to return to. Deferring, as Kobalte's own autofocus does, lets it pull stray focus back.
|
|
130
|
+
setTimeout(() => autofocusEl.focus({ preventScroll: true }))
|
|
129
131
|
}
|
|
130
132
|
}}
|
|
131
133
|
>
|