@rogieking/figui3 1.2.0 → 1.2.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/example.html +420 -378
- package/fig.css +10 -0
- package/fig.js +7 -3
- package/package.json +1 -1
package/example.html
CHANGED
|
@@ -10,285 +10,127 @@
|
|
|
10
10
|
type="text/css"
|
|
11
11
|
href="fig.css">
|
|
12
12
|
<script src="fig.js"></script>
|
|
13
|
+
<style>
|
|
14
|
+
body {
|
|
15
|
+
width: 480px;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
13
19
|
</head>
|
|
14
20
|
|
|
15
21
|
<body>
|
|
16
22
|
<fig-header>
|
|
17
|
-
<
|
|
23
|
+
<h2>UI3 Components</h2>
|
|
18
24
|
</fig-header>
|
|
19
|
-
<
|
|
20
|
-
<h3>Heading 3</h3>
|
|
21
|
-
<form onsubmit="console.log('submit'); return false;">
|
|
22
|
-
<fig-button type="submit">Submit</fig-button>
|
|
23
|
-
</form>
|
|
24
|
-
<br />
|
|
25
|
-
<fig-button id="button-progressive-blur"
|
|
26
|
-
variant="ghost"
|
|
27
|
-
icon="true"
|
|
28
|
-
class=""
|
|
29
|
-
disabled="true"><svg width="16"
|
|
30
|
-
height="16"
|
|
31
|
-
viewBox="0 0 16 16"
|
|
32
|
-
fill="none"
|
|
33
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
34
|
-
<path fill-rule="evenodd"
|
|
35
|
-
clip-rule="evenodd"
|
|
36
|
-
d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 7C7.70948 7 8.71836 6.14112 8.94999 5H14V4H8.94999C8.71836 2.85888 7.70948 2 6.5 2C5.29052 2 4.28164 2.85888 4.05001 4H2V5H4.05001C4.28164 6.14112 5.29052 7 6.5 7ZM9.5 13C8.67157 13 8 12.3284 8 11.5C8 10.6716 8.67157 10 9.5 10C10.3284 10 11 10.6716 11 11.5C11 12.3284 10.3284 13 9.5 13ZM9.5 14C8.29052 14 7.28164 13.1411 7.05001 12H2V11H7.05001C7.28164 9.85888 8.29052 9 9.5 9C10.7095 9 11.7184 9.85888 11.95 11H14V12H11.95C11.7184 13.1411 10.7095 14 9.5 14Z"
|
|
37
|
-
fill="currentColor"></path>
|
|
38
|
-
</svg></fig-button>
|
|
39
|
-
<br /> <br />
|
|
40
|
-
<fig-button disabled>Button 1</fig-button>
|
|
41
|
-
<br /><br />
|
|
42
|
-
<fig-button variant="secondary"
|
|
43
|
-
disabled>Button 1</fig-button>
|
|
44
|
-
<br /><br />
|
|
45
|
-
<fig-button-combo>
|
|
46
|
-
<fig-button disabled>Button 1</fig-button>
|
|
47
|
-
<fig-button disabled>Button 2</fig-button>
|
|
48
|
-
<fig-button disabled>Button 3</fig-button>
|
|
49
|
-
</fig-button-combo>
|
|
50
|
-
<br /><br />
|
|
51
|
-
<fig-button-combo>
|
|
52
|
-
<fig-button variant="secondary"
|
|
53
|
-
disabled>Button 1</fig-button>
|
|
54
|
-
<fig-button variant="secondary"
|
|
55
|
-
disabled>Button 2</fig-button>
|
|
56
|
-
<fig-button variant="secondary"
|
|
57
|
-
disabled>Button 3</fig-button>
|
|
58
|
-
</fig-button-combo>
|
|
59
|
-
<br /><br />
|
|
60
|
-
<fig-dropdown style="width:100px;">
|
|
61
|
-
<option>One</option>
|
|
62
|
-
<option>Two</option>
|
|
63
|
-
<option>Three</option>
|
|
64
|
-
<option selected>Fourhundred sixty two</option>
|
|
65
|
-
</fig-dropdown>
|
|
66
|
-
<br /><br />
|
|
67
|
-
<fig-field style="width:300px;">
|
|
68
|
-
<label>Range slider</label>
|
|
69
|
-
<fig-slider min="0"
|
|
70
|
-
max="1"
|
|
71
|
-
transform="100"
|
|
72
|
-
variant="minimal"
|
|
73
|
-
step="0.01"
|
|
74
|
-
text="true"
|
|
75
|
-
style="width:300px;"
|
|
76
|
-
value="0.5">
|
|
77
|
-
</fig-slider>
|
|
78
|
-
</fig-field>
|
|
79
|
-
<fig-field style="width:300px;">
|
|
80
|
-
<label>Opacity slider</label>
|
|
81
|
-
<fig-slider type="opacity"
|
|
82
|
-
variant="minimal"
|
|
83
|
-
value="75"
|
|
84
|
-
color="#ff0000"
|
|
85
|
-
units="%"
|
|
86
|
-
text="true"></fig-slider>
|
|
87
|
-
</fig-field>
|
|
88
|
-
|
|
89
|
-
<fig-field style="width:300px;">
|
|
90
|
-
<label>Hue slider</label>
|
|
91
|
-
<fig-slider type="hue"
|
|
92
|
-
style="--bg-hue: linear-gradient(90deg in lch longer hue,#fc38ff, #abff57)"
|
|
93
|
-
variant="minimal"
|
|
94
|
-
value="55"></fig-slider>
|
|
95
|
-
</fig-field>
|
|
96
|
-
|
|
97
|
-
<fig-field style="width:300px;">
|
|
98
|
-
<label>Stepper slider</label>
|
|
99
|
-
<fig-slider type="stepper"
|
|
100
|
-
variant="minimal"
|
|
101
|
-
value="25"
|
|
102
|
-
default="50"
|
|
103
|
-
step="25">
|
|
104
|
-
<datalist id="markers">
|
|
105
|
-
<option value="0"></option>
|
|
106
|
-
<option value="25"></option>
|
|
107
|
-
<option value="50"></option>
|
|
108
|
-
<option value="75"></option>
|
|
109
|
-
<option value="100"></option>
|
|
110
|
-
</datalist>
|
|
111
|
-
</fig-slider>
|
|
112
|
-
</fig-field>
|
|
25
|
+
<fig-content>
|
|
113
26
|
|
|
114
|
-
|
|
115
|
-
<
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
default="0"
|
|
120
|
-
step="0.25"
|
|
121
|
-
max="5"
|
|
122
|
-
min="-5">
|
|
123
|
-
<datalist id="markers">
|
|
124
|
-
<option value="0"></option>
|
|
125
|
-
</datalist>
|
|
126
|
-
</fig-slider>
|
|
127
|
-
</fig-field>
|
|
128
|
-
<br />
|
|
129
|
-
<fig-input-text min="0"
|
|
130
|
-
max="1"
|
|
131
|
-
step="0.1"
|
|
132
|
-
transform="100"
|
|
133
|
-
type="number"
|
|
134
|
-
autoresize="true"
|
|
135
|
-
value="0.5">
|
|
136
|
-
<span slot="append">%</span>
|
|
137
|
-
</fig-input-text>
|
|
27
|
+
<h2>Details</h2>
|
|
28
|
+
<details>
|
|
29
|
+
<summary>Advanced settings</summary>
|
|
30
|
+
<p>Some more content here</p>
|
|
31
|
+
</details>
|
|
138
32
|
|
|
33
|
+
<h2>Avatar</h2>
|
|
34
|
+
<fig-field>
|
|
35
|
+
<label>Default</label>
|
|
36
|
+
<fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
37
|
+
name="John Doe"></fig-avatar>
|
|
38
|
+
</fig-field>
|
|
39
|
+
<fig-field>
|
|
40
|
+
<label>Large</label>
|
|
41
|
+
<fig-avatar size="large"
|
|
42
|
+
src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
43
|
+
name="John Doe"></fig-avatar>
|
|
44
|
+
</fig-field>
|
|
45
|
+
<fig-field>
|
|
46
|
+
<label>No image (initials)</label>
|
|
47
|
+
<fig-avatar name="John Doe"></fig-avatar>
|
|
48
|
+
</fig-field>
|
|
49
|
+
<fig-field>
|
|
50
|
+
<label>Large</label>
|
|
51
|
+
<fig-avatar size="large"
|
|
52
|
+
src="https://gravatar.com/avatar/b6a96b1e55e3771caab3225dd98c8633?size=256"
|
|
53
|
+
name="Rogie King"></fig-avatar>
|
|
54
|
+
</fig-field>
|
|
139
55
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<
|
|
148
|
-
<fig-slider type="opacity"
|
|
149
|
-
full
|
|
150
|
-
value="0.5"
|
|
151
|
-
min="0"
|
|
152
|
-
max="1"
|
|
153
|
-
step="0.01"
|
|
154
|
-
transform="100"
|
|
155
|
-
color="#ff0000"
|
|
156
|
-
units="%"
|
|
157
|
-
text="true"></fig-slider>
|
|
158
|
-
<fig-button variant="ghost"
|
|
159
|
-
type="toggle"
|
|
160
|
-
icon="true">
|
|
161
|
-
<svg class="svg"
|
|
162
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
163
|
-
width="16"
|
|
164
|
-
height="16"
|
|
165
|
-
viewBox="0 0 16 16">
|
|
166
|
-
<path fill="currentColor"
|
|
167
|
-
fill-opacity="1"
|
|
168
|
-
fill-rule="evenodd"
|
|
169
|
-
stroke="none"
|
|
170
|
-
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
|
|
171
|
-
</path>
|
|
172
|
-
</svg>
|
|
173
|
-
</fig-button>
|
|
174
|
-
</fig-field>
|
|
175
|
-
<br />
|
|
176
|
-
<fig-field direction="horizontal">
|
|
177
|
-
<label>Blend mode</label>
|
|
178
|
-
<fig-dropdown full
|
|
179
|
-
type="dropdown">
|
|
180
|
-
<option>One</option>
|
|
181
|
-
<option>Two</option>
|
|
182
|
-
</fig-dropdown>
|
|
183
|
-
<fig-button variant="ghost"
|
|
184
|
-
type="toggle"
|
|
185
|
-
icon="true">
|
|
186
|
-
<svg class="svg"
|
|
187
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
188
|
-
width="16"
|
|
189
|
-
height="16"
|
|
190
|
-
viewBox="0 0 16 16">
|
|
191
|
-
<path fill="currentColor"
|
|
192
|
-
fill-opacity="1"
|
|
193
|
-
fill-rule="evenodd"
|
|
194
|
-
stroke="none"
|
|
195
|
-
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
|
|
196
|
-
</path>
|
|
197
|
-
</svg>
|
|
198
|
-
</fig-button>
|
|
199
|
-
</fig-field>
|
|
200
|
-
<br />
|
|
201
|
-
<fig-field direction="horizontal">
|
|
202
|
-
<label>Description</label>
|
|
203
|
-
<fig-input-text multiline="true"
|
|
204
|
-
value=""
|
|
205
|
-
full
|
|
206
|
-
autoresize="true"
|
|
207
|
-
resizable="true"
|
|
208
|
-
placeholder="Anthropic API key"></fig-input-text>
|
|
209
|
-
<fig-button variant="ghost"
|
|
210
|
-
type="toggle"
|
|
211
|
-
icon="true">
|
|
212
|
-
<svg class="svg"
|
|
213
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
214
|
-
width="16"
|
|
215
|
-
height="16"
|
|
216
|
-
viewBox="0 0 16 16">
|
|
217
|
-
<path fill="currentColor"
|
|
218
|
-
fill-opacity="1"
|
|
219
|
-
fill-rule="evenodd"
|
|
220
|
-
stroke="none"
|
|
221
|
-
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
|
|
222
|
-
</path>
|
|
223
|
-
</svg>
|
|
224
|
-
</fig-button>
|
|
225
|
-
</fig-field>
|
|
226
|
-
<fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
227
|
-
name="John Doe"></fig-avatar>
|
|
228
|
-
<fig-avatar size="large"
|
|
229
|
-
src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
230
|
-
name="John Doe"></fig-avatar>
|
|
231
|
-
<fig-avatar name="John Doe"></fig-avatar>
|
|
232
|
-
<fig-avatar size="large"
|
|
233
|
-
src="data:image/png;base64,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"
|
|
234
|
-
name="Rogie King"></fig-avatar>
|
|
235
|
-
<fig-content>
|
|
56
|
+
<h2>Tabs</h2>
|
|
57
|
+
<fig-field>
|
|
58
|
+
<fig-tabs>
|
|
59
|
+
<fig-tab selected>Tab #1</fig-tab>
|
|
60
|
+
<fig-tab>Tab #2</fig-tab>
|
|
61
|
+
</fig-tabs>
|
|
62
|
+
</fig-field>
|
|
63
|
+
<h2>Segmented control</h2>
|
|
236
64
|
|
|
237
|
-
<fig-
|
|
238
|
-
<fig-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
65
|
+
<fig-field>
|
|
66
|
+
<fig-segmented-control>
|
|
67
|
+
<fig-segment selected>One</fig-segment>
|
|
68
|
+
<fig-segment>Two</fig-segment>
|
|
69
|
+
<fig-segment>Three</fig-segment>
|
|
70
|
+
</fig-segmented-control>
|
|
71
|
+
</fig-field>
|
|
72
|
+
<h2>Image</h2>
|
|
73
|
+
<fig-field>
|
|
74
|
+
<label>Default</label>
|
|
75
|
+
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-image>
|
|
76
|
+
</fig-field>
|
|
77
|
+
<fig-field>
|
|
78
|
+
<label>Medium</label>
|
|
79
|
+
<fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
80
|
+
size="medium"></fig-image>
|
|
81
|
+
</fig-field>
|
|
82
|
+
<fig-field>
|
|
83
|
+
<label>Large (with upload)</label>
|
|
84
|
+
<fig-image upload="true"
|
|
85
|
+
label="Upload image"
|
|
86
|
+
size="large"></fig-image>
|
|
87
|
+
</fig-field>
|
|
256
88
|
<br /><br />
|
|
257
|
-
<
|
|
89
|
+
<h2>Button</h2>
|
|
90
|
+
<fig-field>
|
|
91
|
+
<label>Primary Button</label>
|
|
258
92
|
<fig-button>Primary</fig-button>
|
|
93
|
+
</fig-field>
|
|
94
|
+
<fig-field>
|
|
95
|
+
<label>Secondary Button</label>
|
|
259
96
|
<fig-button variant="secondary">Secondary</fig-button>
|
|
97
|
+
</fig-field>
|
|
98
|
+
<fig-field>
|
|
99
|
+
<label>Ghost Button</label>
|
|
260
100
|
<fig-button variant="ghost">Ghost</fig-button>
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
</fig-dialog>
|
|
101
|
+
</fig-field>
|
|
102
|
+
<fig-field>
|
|
103
|
+
<label>Submit Button</label>
|
|
104
|
+
<fig-button type="submit">Submit</fig-button>
|
|
105
|
+
</fig-field>
|
|
106
|
+
<fig-field>
|
|
107
|
+
<label>Disabled Button</label>
|
|
108
|
+
<fig-button disabled>Disabled</fig-button>
|
|
109
|
+
</fig-field>
|
|
110
|
+
<fig-field>
|
|
111
|
+
<label>Disabled Button (secondary)</label>
|
|
112
|
+
<fig-button variant="secondary"
|
|
113
|
+
disabled>Disabled</fig-button>
|
|
114
|
+
</fig-field>
|
|
115
|
+
<fig-field>
|
|
116
|
+
<label>Disabled Button (icon)</label>
|
|
117
|
+
<fig-button variant="secondary"
|
|
118
|
+
icon="true"
|
|
119
|
+
disabled><svg width="16"
|
|
120
|
+
height="16"
|
|
121
|
+
viewBox="0 0 16 16"
|
|
122
|
+
fill="none"
|
|
123
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
124
|
+
<path fill-rule="evenodd"
|
|
125
|
+
clip-rule="evenodd"
|
|
126
|
+
d="M6.5 6C7.32843 6 8 5.32843 8 4.5C8 3.67157 7.32843 3 6.5 3C5.67157 3 5 3.67157 5 4.5C5 5.32843 5.67157 6 6.5 6ZM6.5 7C7.70948 7 8.71836 6.14112 8.94999 5H14V4H8.94999C8.71836 2.85888 7.70948 2 6.5 2C5.29052 2 4.28164 2.85888 4.05001 4H2V5H4.05001C4.28164 6.14112 5.29052 7 6.5 7ZM9.5 13C8.67157 13 8 12.3284 8 11.5C8 10.6716 8.67157 10 9.5 10C10.3284 10 11 10.6716 11 11.5C11 12.3284 10.3284 13 9.5 13ZM9.5 14C8.29052 14 7.28164 13.1411 7.05001 12H2V11H7.05001C7.28164 9.85888 8.29052 9 9.5 9C10.7095 9 11.7184 9.85888 11.95 11H14V12H11.95C11.7184 13.1411 10.7095 14 9.5 14Z"
|
|
127
|
+
fill="currentColor"></path>
|
|
128
|
+
</svg></fig-button>
|
|
129
|
+
</fig-field>
|
|
291
130
|
|
|
131
|
+
<h2>Combo button</h2>
|
|
132
|
+
<fig-field>
|
|
133
|
+
<label>Primary (compact dropdown</label>
|
|
292
134
|
<fig-button-combo>
|
|
293
135
|
<fig-button>Primary</fig-button>
|
|
294
136
|
<fig-button icon="true"
|
|
@@ -311,6 +153,10 @@
|
|
|
311
153
|
</fig-dropdown>
|
|
312
154
|
</fig-button>
|
|
313
155
|
</fig-button-combo>
|
|
156
|
+
</fig-field>
|
|
157
|
+
|
|
158
|
+
<fig-field>
|
|
159
|
+
<label>Secondary (with dropdown)</label>
|
|
314
160
|
<fig-button-combo>
|
|
315
161
|
<fig-button variant="secondary">Secondary</fig-button>
|
|
316
162
|
<fig-button variant="secondary"
|
|
@@ -333,6 +179,43 @@
|
|
|
333
179
|
</fig-dropdown>
|
|
334
180
|
</fig-button>
|
|
335
181
|
</fig-button-combo>
|
|
182
|
+
</fig-field>
|
|
183
|
+
|
|
184
|
+
<fig-field>
|
|
185
|
+
<label>Primary (disabled)</label>
|
|
186
|
+
<fig-button-combo>
|
|
187
|
+
<fig-button disabled>Button 1</fig-button>
|
|
188
|
+
<fig-button disabled>Button 2</fig-button>
|
|
189
|
+
<fig-button disabled>Button 3</fig-button>
|
|
190
|
+
</fig-button-combo>
|
|
191
|
+
</fig-field>
|
|
192
|
+
|
|
193
|
+
<fig-field>
|
|
194
|
+
<label>Secondary (disabled)</label>
|
|
195
|
+
<fig-button-combo>
|
|
196
|
+
<fig-button variant="secondary"
|
|
197
|
+
disabled>Button 1</fig-button>
|
|
198
|
+
<fig-button variant="secondary"
|
|
199
|
+
disabled>Button 2</fig-button>
|
|
200
|
+
<fig-button variant="secondary"
|
|
201
|
+
disabled>Button 3</fig-button>
|
|
202
|
+
</fig-button-combo>
|
|
203
|
+
</fig-field>
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
<fig-field>
|
|
207
|
+
<label>Select button</label>
|
|
208
|
+
<fig-button type="select">
|
|
209
|
+
Select
|
|
210
|
+
<fig-dropdown>
|
|
211
|
+
<option>One</option>
|
|
212
|
+
<option>Two</option>
|
|
213
|
+
</fig-dropdown>
|
|
214
|
+
</fig-button>
|
|
215
|
+
</fig-field>
|
|
216
|
+
|
|
217
|
+
<fig-field>
|
|
218
|
+
<label>Select button (icon)</label>
|
|
336
219
|
<fig-button icon="true"
|
|
337
220
|
type="select">
|
|
338
221
|
<svg width="24"
|
|
@@ -351,19 +234,19 @@
|
|
|
351
234
|
<option>Two</option>
|
|
352
235
|
</fig-dropdown>
|
|
353
236
|
</fig-button>
|
|
354
|
-
|
|
355
|
-
Select
|
|
356
|
-
<fig-dropdown>
|
|
357
|
-
<option>One</option>
|
|
358
|
-
<option>Two</option>
|
|
359
|
-
</fig-dropdown>
|
|
360
|
-
</fig-button>
|
|
237
|
+
</fig-field>
|
|
361
238
|
|
|
362
|
-
|
|
239
|
+
<fig-field>
|
|
240
|
+
<label>Upload button</label>
|
|
241
|
+
<fig-button variant="secondary"
|
|
363
242
|
type="upload">
|
|
364
243
|
Upload
|
|
365
244
|
<input type="file" />
|
|
366
245
|
</fig-button>
|
|
246
|
+
</fig-field>
|
|
247
|
+
|
|
248
|
+
<fig-field>
|
|
249
|
+
<label>Toggle button</label>
|
|
367
250
|
<fig-button variant="ghost"
|
|
368
251
|
type="toggle"
|
|
369
252
|
icon="true">
|
|
@@ -380,6 +263,10 @@
|
|
|
380
263
|
</path>
|
|
381
264
|
</svg>
|
|
382
265
|
</fig-button>
|
|
266
|
+
</fig-field>
|
|
267
|
+
|
|
268
|
+
<fig-field>
|
|
269
|
+
<label>Toggle button (selected) with tooltip</label>
|
|
383
270
|
<fig-tooltip text="Toggle off/on">
|
|
384
271
|
<fig-button variant="ghost"
|
|
385
272
|
type="toggle"
|
|
@@ -396,10 +283,51 @@
|
|
|
396
283
|
</svg>
|
|
397
284
|
</fig-button>
|
|
398
285
|
</fig-tooltip>
|
|
399
|
-
</
|
|
400
|
-
|
|
401
|
-
<fig-
|
|
402
|
-
|
|
286
|
+
</fig-field>
|
|
287
|
+
|
|
288
|
+
<fig-dialog open="true"
|
|
289
|
+
position="bottom right">
|
|
290
|
+
<fig-header>
|
|
291
|
+
<h3>Dialog</h3>
|
|
292
|
+
<fig-button variant="ghost"
|
|
293
|
+
icon="true"
|
|
294
|
+
close-dialog>
|
|
295
|
+
<svg width="24"
|
|
296
|
+
height="24"
|
|
297
|
+
viewBox="0 0 24 24"
|
|
298
|
+
fill="none"
|
|
299
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
300
|
+
<path fill-rule="evenodd"
|
|
301
|
+
clip-rule="evenodd"
|
|
302
|
+
d="M17.3536 6.64645C17.5488 6.84171 17.5488 7.15829 17.3536 7.35355L12.7071 12L17.3536 16.6464C17.5488 16.8417 17.5488 17.1583 17.3536 17.3536C17.1583 17.5488 16.8417 17.5488 16.6464 17.3536L12 12.7071L7.35355 17.3536C7.15829 17.5488 6.84171 17.5488 6.64645 17.3536C6.45118 17.1583 6.45118 16.8417 6.64645 16.6464L11.2929 12L6.64645 7.35365C6.45119 7.15839 6.45118 6.84181 6.64644 6.64654C6.84171 6.45128 7.15829 6.45128 7.35355 6.64654L12 11.2929L16.6464 6.64645C16.8417 6.45118 17.1583 6.45118 17.3536 6.64645Z"
|
|
303
|
+
fill="currentColor"
|
|
304
|
+
fill-opacity="0.9" />
|
|
305
|
+
</svg>
|
|
306
|
+
|
|
307
|
+
</fig-button>
|
|
308
|
+
</fig-header>
|
|
309
|
+
<fig-content>
|
|
310
|
+
<p>Some content here</p>
|
|
311
|
+
</fig-content>
|
|
312
|
+
<footer>
|
|
313
|
+
<fig-button variant="secondary"
|
|
314
|
+
close-dialog>Cancel</fig-button>
|
|
315
|
+
<fig-button>Save</fig-button>
|
|
316
|
+
</footer>
|
|
317
|
+
</fig-dialog>
|
|
318
|
+
|
|
319
|
+
<h2>Dropdown</h2>
|
|
320
|
+
<fig-field>
|
|
321
|
+
<label>Dropdown</label>
|
|
322
|
+
<fig-dropdown>
|
|
323
|
+
<option>One</option>
|
|
324
|
+
<option>Two</option>
|
|
325
|
+
<option>Three</option>
|
|
326
|
+
<option selected>Fourhundred sixty two</option>
|
|
327
|
+
</fig-dropdown>
|
|
328
|
+
</fig-field>
|
|
329
|
+
<fig-field>
|
|
330
|
+
<label>Dropdown (with grouped options)</label>
|
|
403
331
|
<fig-dropdown>
|
|
404
332
|
<optgroup label="Numbers">
|
|
405
333
|
<option>One</option>
|
|
@@ -411,126 +339,158 @@
|
|
|
411
339
|
</optgroup>
|
|
412
340
|
</fig-dropdown>
|
|
413
341
|
</fig-field>
|
|
414
|
-
<
|
|
415
|
-
<fig-field direction="horizontal">
|
|
342
|
+
<fig-field>
|
|
416
343
|
<label>Dropdown</label>
|
|
417
344
|
<fig-dropdown>
|
|
418
345
|
<option>One</option>
|
|
419
346
|
<option>Two</option>
|
|
420
347
|
</fig-dropdown>
|
|
421
348
|
</fig-field>
|
|
422
|
-
<
|
|
423
|
-
<fig-
|
|
424
|
-
|
|
349
|
+
<h2>Text input</h2>
|
|
350
|
+
<fig-field>
|
|
351
|
+
<label>Text input</label>
|
|
352
|
+
<fig-input-text placeholder="Enter text"></fig-input-text>
|
|
353
|
+
</fig-field>
|
|
354
|
+
<fig-field>
|
|
355
|
+
<label>Multiline input</label>
|
|
356
|
+
<fig-input-text multiline="true"
|
|
357
|
+
value=""
|
|
358
|
+
autoresize="true"
|
|
359
|
+
resizable="true"
|
|
360
|
+
placeholder="Anthropic API key">
|
|
361
|
+
</fig-field>
|
|
362
|
+
<fig-field>
|
|
363
|
+
<label>Numeric input</label>
|
|
364
|
+
<fig-input-text placeholder="###"
|
|
365
|
+
type="number"></fig-input-text>
|
|
366
|
+
</fig-field>
|
|
367
|
+
<fig-field>
|
|
368
|
+
<label>Password input</label>
|
|
369
|
+
<fig-input-text type="password"></fig-input-text>
|
|
370
|
+
</fig-field>
|
|
371
|
+
<fig-field>
|
|
372
|
+
<label>Combo input</label>
|
|
373
|
+
<fig-combo-input options="House, Apartment, Condo, Other"
|
|
374
|
+
placeholder="Type of residence">
|
|
425
375
|
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
<fig-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
<fig-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
<
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
<fig-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
<
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
</
|
|
473
|
-
<
|
|
376
|
+
</fig-combo-input>
|
|
377
|
+
</fig-field>
|
|
378
|
+
<fig-field>
|
|
379
|
+
<label>Appended input</label>
|
|
380
|
+
|
|
381
|
+
<fig-input-text type="number"
|
|
382
|
+
min="0"
|
|
383
|
+
max="360"
|
|
384
|
+
value="90">
|
|
385
|
+
<span slot="append">°</span>
|
|
386
|
+
</fig-input-text>
|
|
387
|
+
</fig-field>
|
|
388
|
+
<fig-field>
|
|
389
|
+
<label>Prepended input</label>
|
|
390
|
+
<fig-input-text value=""
|
|
391
|
+
placeholder="Number">
|
|
392
|
+
<span slot="prepend">X</span>
|
|
393
|
+
</fig-input-text>
|
|
394
|
+
</fig-field>
|
|
395
|
+
<h2>Color input</h2>
|
|
396
|
+
<fig-field>
|
|
397
|
+
<label>Color swatch</label>
|
|
398
|
+
<fig-input-color value="#FF000066"></fig-input-color>
|
|
399
|
+
</fig-field>
|
|
400
|
+
<fig-field>
|
|
401
|
+
<label>Color input (with text)</label>
|
|
402
|
+
<fig-input-color value="#00FFFF33"
|
|
403
|
+
text="true"></fig-input-color>
|
|
404
|
+
</fig-field>
|
|
405
|
+
<fig-field>
|
|
406
|
+
<label>Color input (with text and alpha)</label>
|
|
407
|
+
<fig-input-color value="#00FF00"
|
|
408
|
+
alpha="true"
|
|
409
|
+
text="true"></fig-input-color>
|
|
410
|
+
</fig-field>
|
|
411
|
+
<h2>Checkbox</h2>
|
|
412
|
+
<fig-field>
|
|
413
|
+
<fig-checkbox label="Checkbox"></fig-checkbox>
|
|
414
|
+
</fig-field>
|
|
415
|
+
<h2>Radio</h2>
|
|
416
|
+
<fig-field>
|
|
417
|
+
<label>Radio buttons</label>
|
|
418
|
+
<fig-radio label="Radio #1"
|
|
419
|
+
name="r1"></fig-radio>
|
|
420
|
+
<fig-radio label="Radio #2"
|
|
421
|
+
name="r1"></fig-radio>
|
|
422
|
+
</fig-field>
|
|
423
|
+
<h2>Switch</h2>
|
|
424
|
+
<fig-field>
|
|
425
|
+
<label>Switches</label>
|
|
426
|
+
<fig-switch on="true"
|
|
427
|
+
label="On"></fig-switch>
|
|
428
|
+
<fig-switch indeterminate="true"
|
|
429
|
+
label="Indeterminate"></fig-switch>
|
|
430
|
+
<fig-switch disabled
|
|
431
|
+
label="Disabled"></fig-switch>
|
|
432
|
+
</fig-field>
|
|
433
|
+
<h2>Chit</h2>
|
|
434
|
+
<fig-field>
|
|
435
|
+
<label>Chit</label>
|
|
436
|
+
<hstack>
|
|
437
|
+
<fig-chit type="color"
|
|
438
|
+
selected="true"
|
|
439
|
+
disabled="true"
|
|
440
|
+
value="#00FF00"></fig-chit>
|
|
441
|
+
<fig-chit type="color"
|
|
442
|
+
disabled="true"
|
|
443
|
+
value="#000000"></fig-chit>
|
|
444
|
+
<fig-chit type="gradient"
|
|
445
|
+
variant="linear"
|
|
446
|
+
size="large"
|
|
447
|
+
disabled="true"></fig-chit>
|
|
448
|
+
<fig-chit type="gradient"
|
|
449
|
+
variant="angular"
|
|
450
|
+
size="large"
|
|
451
|
+
selected="true"
|
|
452
|
+
disabled="true"></fig-chit>
|
|
453
|
+
<fig-chit type="gradient"
|
|
454
|
+
variant="radial"
|
|
455
|
+
size="large"
|
|
456
|
+
disabled="true"></fig-chit>
|
|
457
|
+
<fig-chit type="image"
|
|
458
|
+
disabled="true"
|
|
459
|
+
src="https://img.freepik.com/free-vector/gradient-grainy-gradient-background_23-2149922133.jpg?semt=ais_hybrid"></fig-chit>
|
|
460
|
+
<fig-chit type="image"
|
|
461
|
+
disabled="true"
|
|
462
|
+
size="large"
|
|
463
|
+
onclick="console.log('clicked')"
|
|
464
|
+
src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-chit>
|
|
465
|
+
<fig-chit type="image"
|
|
466
|
+
disabled="true"
|
|
467
|
+
selected="true"
|
|
468
|
+
size="large"
|
|
469
|
+
src="https://img.freepik.com/free-vector/gradient-grainy-gradient-background_23-2149922133.jpg?semt=ais_hybrid"></fig-chit>
|
|
470
|
+
<fig-chit type="image"
|
|
471
|
+
disabled="true"
|
|
472
|
+
size="large"></fig-chit>
|
|
473
|
+
</hstack>
|
|
474
|
+
</fig-field>
|
|
475
|
+
|
|
476
|
+
<h2>Tooltip</h2>
|
|
474
477
|
<p>Some paragraph text here with a
|
|
475
478
|
<fig-tooltip text="Tooltip text">
|
|
476
479
|
<em>Tooltip</em>
|
|
477
480
|
</fig-tooltip> for more information.
|
|
478
481
|
</p>
|
|
479
|
-
<
|
|
480
|
-
<hstack>
|
|
481
|
-
<input type="radio"
|
|
482
|
-
name="radio"
|
|
483
|
-
checked />
|
|
484
|
-
<input type="radio"
|
|
485
|
-
name="radio" />
|
|
486
|
-
</hstack>
|
|
487
|
-
<br /><br />
|
|
488
|
-
<fig-checkbox label="Checkbox"></fig-checkbox>
|
|
489
|
-
<br /><br />
|
|
490
|
-
<fig-radio label="Radio #1"
|
|
491
|
-
name="r1"></fig-radio>
|
|
492
|
-
<br /> <br />
|
|
493
|
-
<fig-radio label="Radio #2"
|
|
494
|
-
name="r1"></fig-radio>
|
|
495
|
-
<br /><br />
|
|
496
|
-
<vstack>
|
|
497
|
-
<fig-switch on="true"></fig-switch>
|
|
498
|
-
<fig-switch indeterminate="true"></fig-switch>
|
|
499
|
-
<fig-switch disabled></fig-switch>
|
|
500
|
-
</vstack>
|
|
501
|
-
<br /><br />
|
|
502
|
-
<fig-input-color value="#00FFFF33"
|
|
503
|
-
text="true"></fig-input-color>
|
|
504
|
-
<br /><br />
|
|
505
|
-
<fig-input-color value="#00FF00"
|
|
506
|
-
alpha="true"
|
|
507
|
-
text="true"></fig-input-color>
|
|
508
|
-
<br /><br />
|
|
509
|
-
<fig-input-text multiline="true"
|
|
510
|
-
value=""
|
|
511
|
-
autoresize="true"
|
|
512
|
-
resizable="true"
|
|
513
|
-
placeholder="Anthropic API key">
|
|
514
|
-
</fig-input-text>
|
|
515
|
-
<br />
|
|
516
|
-
<fig-input-text type="number"
|
|
517
|
-
value="10"></fig-input-text>
|
|
518
|
-
<br /><br />
|
|
519
|
-
<fig-input-text value=""
|
|
520
|
-
placeholder="Number">
|
|
521
|
-
<span slot="prepend">X</span>
|
|
522
|
-
</fig-input-text>
|
|
523
|
-
<br /><br />
|
|
482
|
+
<h2>Field</h2>
|
|
524
483
|
<fig-field direction="horizontal">
|
|
525
|
-
<label>
|
|
484
|
+
<label>Horizontal</label>
|
|
526
485
|
<fig-input-text value=""
|
|
527
486
|
placeholder="Field placeholder"></fig-input-text>
|
|
528
487
|
</fig-field>
|
|
529
488
|
<fig-field>
|
|
530
|
-
<label>
|
|
489
|
+
<label>Vertical</label>
|
|
531
490
|
<fig-input-text value=""
|
|
532
491
|
placeholder="Field placeholder"></fig-input-text>
|
|
533
492
|
</fig-field>
|
|
493
|
+
<h2>Slider</h2>
|
|
534
494
|
<fig-field>
|
|
535
495
|
<label>Default slider</label>
|
|
536
496
|
<fig-slider default="25"
|
|
@@ -589,8 +549,90 @@
|
|
|
589
549
|
</datalist>
|
|
590
550
|
</fig-slider>
|
|
591
551
|
</fig-field>
|
|
592
|
-
|
|
552
|
+
<h2>Spinner</h2>
|
|
593
553
|
<fig-spinner></fig-spinner>
|
|
554
|
+
|
|
555
|
+
<h2>Misc.</h2>
|
|
556
|
+
<fig-field direction="horizontal">
|
|
557
|
+
<label>Opacity</label>
|
|
558
|
+
<fig-slider type="opacity"
|
|
559
|
+
full
|
|
560
|
+
value="0.5"
|
|
561
|
+
min="0"
|
|
562
|
+
max="1"
|
|
563
|
+
step="0.01"
|
|
564
|
+
transform="100"
|
|
565
|
+
color="#ff0000"
|
|
566
|
+
units="%"
|
|
567
|
+
text="true"></fig-slider>
|
|
568
|
+
<fig-button variant="ghost"
|
|
569
|
+
type="toggle"
|
|
570
|
+
icon="true">
|
|
571
|
+
<svg class="svg"
|
|
572
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
573
|
+
width="16"
|
|
574
|
+
height="16"
|
|
575
|
+
viewBox="0 0 16 16">
|
|
576
|
+
<path fill="currentColor"
|
|
577
|
+
fill-opacity="1"
|
|
578
|
+
fill-rule="evenodd"
|
|
579
|
+
stroke="none"
|
|
580
|
+
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
|
|
581
|
+
</path>
|
|
582
|
+
</svg>
|
|
583
|
+
</fig-button>
|
|
584
|
+
</fig-field>
|
|
585
|
+
<br />
|
|
586
|
+
<fig-field direction="horizontal">
|
|
587
|
+
<label>Blend mode</label>
|
|
588
|
+
<fig-dropdown full
|
|
589
|
+
type="dropdown">
|
|
590
|
+
<option selected="selected">One</option>
|
|
591
|
+
<option>Two</option>
|
|
592
|
+
</fig-dropdown>
|
|
593
|
+
<fig-button variant="ghost"
|
|
594
|
+
type="toggle"
|
|
595
|
+
icon="true">
|
|
596
|
+
<svg class="svg"
|
|
597
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
598
|
+
width="16"
|
|
599
|
+
height="16"
|
|
600
|
+
viewBox="0 0 16 16">
|
|
601
|
+
<path fill="currentColor"
|
|
602
|
+
fill-opacity="1"
|
|
603
|
+
fill-rule="evenodd"
|
|
604
|
+
stroke="none"
|
|
605
|
+
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
|
|
606
|
+
</path>
|
|
607
|
+
</svg>
|
|
608
|
+
</fig-button>
|
|
609
|
+
</fig-field>
|
|
610
|
+
<br />
|
|
611
|
+
<fig-field direction="horizontal">
|
|
612
|
+
<label>Description</label>
|
|
613
|
+
<fig-input-text multiline="true"
|
|
614
|
+
value=""
|
|
615
|
+
full
|
|
616
|
+
autoresize="true"
|
|
617
|
+
resizable="true"
|
|
618
|
+
placeholder="Anthropic API key"></fig-input-text>
|
|
619
|
+
<fig-button variant="ghost"
|
|
620
|
+
type="toggle"
|
|
621
|
+
icon="true">
|
|
622
|
+
<svg class="svg"
|
|
623
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
624
|
+
width="16"
|
|
625
|
+
height="16"
|
|
626
|
+
viewBox="0 0 16 16">
|
|
627
|
+
<path fill="currentColor"
|
|
628
|
+
fill-opacity="1"
|
|
629
|
+
fill-rule="evenodd"
|
|
630
|
+
stroke="none"
|
|
631
|
+
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
|
|
632
|
+
</path>
|
|
633
|
+
</svg>
|
|
634
|
+
</fig-button>
|
|
635
|
+
</fig-field>
|
|
594
636
|
</fig-content>
|
|
595
637
|
|
|
596
638
|
</body>
|
package/fig.css
CHANGED
|
@@ -552,6 +552,7 @@ fieldset {
|
|
|
552
552
|
textarea,
|
|
553
553
|
input[type="text"],
|
|
554
554
|
input[type="number"],
|
|
555
|
+
input[type="password"],
|
|
555
556
|
.input {
|
|
556
557
|
background-color: var(--figma-color-bg-secondary);
|
|
557
558
|
border: 0;
|
|
@@ -2024,12 +2025,20 @@ fig-tabs {
|
|
|
2024
2025
|
fig-checkbox,
|
|
2025
2026
|
fig-radio {
|
|
2026
2027
|
align-items: center;
|
|
2028
|
+
padding-top: 0.25rem;
|
|
2029
|
+
padding-bottom: 0.25rem;
|
|
2027
2030
|
|
|
2028
2031
|
& label span {
|
|
2029
2032
|
vertical-align: middle;
|
|
2030
2033
|
}
|
|
2031
2034
|
}
|
|
2032
2035
|
|
|
2036
|
+
fig-switch {
|
|
2037
|
+
align-items: center;
|
|
2038
|
+
padding-top: 0.25rem;
|
|
2039
|
+
padding-bottom: 0.25rem;
|
|
2040
|
+
}
|
|
2041
|
+
|
|
2033
2042
|
fig-input-color {
|
|
2034
2043
|
--alpha: 1;
|
|
2035
2044
|
}
|
|
@@ -2186,6 +2195,7 @@ fig-field,
|
|
|
2186
2195
|
margin: 0;
|
|
2187
2196
|
flex-direction: column;
|
|
2188
2197
|
gap: 0;
|
|
2198
|
+
align-items: start;
|
|
2189
2199
|
|
|
2190
2200
|
& > [full] {
|
|
2191
2201
|
flex: 1;
|
package/fig.js
CHANGED
|
@@ -858,6 +858,7 @@ class FigInputText extends HTMLElement {
|
|
|
858
858
|
this.multiline = this.hasAttribute("multiline") || false;
|
|
859
859
|
this.value = this.getAttribute("value") || "";
|
|
860
860
|
this.type = this.getAttribute("type") || "text";
|
|
861
|
+
this.placeholder = this.getAttribute("placeholder") || "";
|
|
861
862
|
if (this.type === "number") {
|
|
862
863
|
if (this.getAttribute("step")) {
|
|
863
864
|
this.step = Number(this.getAttribute("step"));
|
|
@@ -873,7 +874,7 @@ class FigInputText extends HTMLElement {
|
|
|
873
874
|
this.value = Number(this.value);
|
|
874
875
|
}
|
|
875
876
|
}
|
|
876
|
-
|
|
877
|
+
|
|
877
878
|
let html = `<input
|
|
878
879
|
type="${this.type}"
|
|
879
880
|
placeholder="${this.placeholder}"
|
|
@@ -922,7 +923,7 @@ class FigInputText extends HTMLElement {
|
|
|
922
923
|
this.input.focus();
|
|
923
924
|
}
|
|
924
925
|
#transformNumber(value) {
|
|
925
|
-
return Number(value) * (this.transform || 1);
|
|
926
|
+
return value === "" ? "" : Number(value) * (this.transform || 1);
|
|
926
927
|
}
|
|
927
928
|
#handleInput(e) {
|
|
928
929
|
let value = e.target.value;
|
|
@@ -1102,7 +1103,7 @@ class FigField extends HTMLElement {
|
|
|
1102
1103
|
}
|
|
1103
1104
|
connectedCallback() {
|
|
1104
1105
|
requestAnimationFrame(() => {
|
|
1105
|
-
this.label = this.querySelector("label");
|
|
1106
|
+
this.label = this.querySelector(":scope>label");
|
|
1106
1107
|
this.input = Array.from(this.childNodes).find((node) =>
|
|
1107
1108
|
node.nodeName.toLowerCase().startsWith("fig-")
|
|
1108
1109
|
);
|
|
@@ -1526,6 +1527,9 @@ class FigComboInput extends HTMLElement {
|
|
|
1526
1527
|
static get observedAttributes() {
|
|
1527
1528
|
return ["options", "placeholder", "value"];
|
|
1528
1529
|
}
|
|
1530
|
+
focus() {
|
|
1531
|
+
this.input.focus();
|
|
1532
|
+
}
|
|
1529
1533
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
1530
1534
|
if (name === "options") {
|
|
1531
1535
|
this.options = newValue.split(",");
|