@opencode/ui 2.0.28 → 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.
Files changed (11) hide show
  1. package/dist/data-display/badge/badge.d.ts +1 -1
  2. package/dist/i18n/en.d.ts +3 -0
  3. package/package.json +1 -1
  4. package/src/actions/button/button.css +260 -243
  5. package/src/actions/icon-button/icon-button.css +125 -117
  6. package/src/actions/submit.css +58 -53
  7. package/src/context/dialog.tsx +3 -0
  8. package/src/data-display/badge/badge.css +5 -0
  9. package/src/data-display/badge/badge.tsx +1 -1
  10. package/src/forms/text-input/text-input.css +185 -180
  11. package/src/i18n/en.ts +3 -0
package/src/forms/text-input/text-input.css CHANGED
@@ -1,181 +1,186 @@
1
- [data-component="text-input-v2"] {
2
- box-sizing: border-box;
3
- display: flex;
4
- flex-direction: row;
5
- align-items: stretch;
6
- padding-block: 0;
7
- padding-inline: 0 8px;
8
- gap: 8px;
9
- width: 280px;
10
- height: 28px;
11
- border: 0;
12
- border-radius: 6px;
13
- outline: 1px solid transparent;
14
- outline-offset: 0;
15
- background:
16
- linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
17
- box-shadow: var(--v2-elevation-button-neutral);
18
- flex: none;
19
- align-self: stretch;
20
- transition:
21
- background 85ms ease-out,
22
- outline-color 85ms ease-out,
23
- box-shadow 85ms ease-out;
24
- }
25
-
26
- [data-component="text-input-v2"][data-appearance="large"] {
27
- height: 32px;
28
- }
29
-
30
- [data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
31
- background:
32
- linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
33
- linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
34
- }
35
-
36
- [data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
37
- outline-color: var(--v2-border-border-focus);
38
- box-shadow: none;
39
- }
40
-
41
- [data-component="text-input-v2"]:where([data-invalid]):not([data-disabled]) {
42
- outline-color: var(--v2-state-fg-danger);
43
- box-shadow: none;
44
- }
45
-
46
- [data-component="text-input-v2"]:where([data-disabled]) {
47
- opacity: 0.5;
48
- cursor: not-allowed;
49
- }
50
-
51
- [data-component="text-input-v2"] [data-slot="text-input-v2-value"] {
52
- display: flex;
53
- flex-direction: row;
54
- align-items: center;
55
- align-self: stretch;
56
- padding: 0;
57
- gap: 6px;
58
- min-width: 0;
59
- flex: 1 1 auto;
60
- min-height: 0;
61
- }
62
-
63
- [data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
64
- display: flex;
65
- flex: none;
66
- align-items: center;
67
- justify-content: center;
68
- padding-inline-start: 8px;
69
- color: var(--v2-icon-icon-muted);
70
- }
71
-
72
- [data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] :is(svg, [data-slot="icon-svg"]) {
73
- display: block;
74
- flex: none;
75
- }
76
-
77
- [data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
78
- padding-inline-start: 0;
79
- }
80
-
81
- [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
82
- display: block;
83
- width: 100%;
84
- min-width: 0;
85
- height: 100%;
86
- padding-block: 0;
87
- padding-inline: 8px 0;
88
- margin: 0;
89
- border: 0;
90
- background: transparent;
91
- outline: none;
92
- font-style: normal;
93
- font-weight: 440;
94
- font-size: 13px;
95
- line-height: var(--line-height-compact);
96
- letter-spacing: -0.04px;
97
- color: var(--v2-text-text-base);
98
- font-variation-settings: "slnt" 0;
99
- }
100
-
101
- [data-component="text-input-v2"] [data-slot="text-input-v2-input"]::placeholder {
102
- color: var(--v2-text-text-faint);
103
- user-select: none;
104
- }
105
-
106
- [data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button {
107
- -webkit-appearance: none;
108
- appearance: none;
109
- display: none;
110
- }
111
-
112
- [data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
113
- font-variant-numeric: tabular-nums;
114
- }
115
-
116
- [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] {
117
- display: flex;
118
- flex-direction: row;
119
- justify-content: center;
120
- align-items: center;
121
- align-self: center;
122
- flex: none;
123
- width: 20px;
124
- height: 20px;
125
- padding: 2px;
126
- gap: 3px;
127
- border: 0;
128
- border-radius: 4px;
129
- background: transparent;
130
- color: var(--v2-icon-icon-muted);
131
- cursor: pointer;
132
- outline: none;
133
- }
134
-
135
- [data-component="text-input-v2"]
136
- [data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
137
- background-color: var(--v2-overlay-simple-overlay-hover);
138
- }
139
-
140
- [data-component="text-input-v2"]
141
- [data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
142
- background-color: var(--v2-overlay-simple-overlay-pressed);
143
- }
144
-
145
- [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus {
146
- outline: none;
147
- }
148
-
149
- [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus-visible {
150
- outline: 2px solid var(--v2-border-border-focus);
151
- outline-offset: 1px;
152
- }
153
-
154
- [data-component="text-input-v2"]:where([data-disabled]) [data-slot="text-input-v2-icon-button"] {
155
- cursor: not-allowed;
156
- pointer-events: none;
157
- }
158
-
159
- [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] [data-slot="icon-svg"] {
160
- display: block;
161
- flex: none;
162
- color: currentColor;
163
- }
164
-
165
- [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
166
- width: 28px;
167
- height: 28px;
168
- padding: 0;
169
- border-radius: 6px;
170
- margin-inline-end: -8px;
171
- }
172
-
173
- [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
174
- color: var(--v2-state-fg-danger);
175
- caret-color: var(--v2-state-fg-danger);
176
- }
177
-
178
- [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"]::placeholder {
179
- color: var(--v2-state-fg-danger);
180
- opacity: 1;
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