@webstudio-is/sdk-components-react 0.94.0 → 0.96.0
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/lib/components.js +754 -33
- package/lib/metas.js +3635 -33
- package/lib/props.js +16274 -33
- package/package.json +14 -11
- package/lib/__generated__/blockquote.props.js +0 -514
- package/lib/__generated__/body.props.js +0 -508
- package/lib/__generated__/bold.props.js +0 -508
- package/lib/__generated__/box.props.js +0 -527
- package/lib/__generated__/button.props.js +0 -564
- package/lib/__generated__/checkbox.props.js +0 -666
- package/lib/__generated__/code-text.props.js +0 -508
- package/lib/__generated__/form.props.js +0 -556
- package/lib/__generated__/fragment.props.js +0 -2
- package/lib/__generated__/heading.props.js +0 -516
- package/lib/__generated__/html-embed.props.js +0 -9
- package/lib/__generated__/image.props.js +0 -581
- package/lib/__generated__/input.props.js +0 -673
- package/lib/__generated__/italic.props.js +0 -508
- package/lib/__generated__/label.props.js +0 -520
- package/lib/__generated__/link.props.js +0 -562
- package/lib/__generated__/list-item.props.js +0 -508
- package/lib/__generated__/list.props.js +0 -534
- package/lib/__generated__/paragraph.props.js +0 -508
- package/lib/__generated__/radio-button.props.js +0 -666
- package/lib/__generated__/rich-text-link.props.js +0 -562
- package/lib/__generated__/separator.props.js +0 -508
- package/lib/__generated__/slot.props.js +0 -2
- package/lib/__generated__/span.props.js +0 -508
- package/lib/__generated__/subscript.props.js +0 -508
- package/lib/__generated__/superscript.props.js +0 -508
- package/lib/__generated__/text.props.js +0 -516
- package/lib/__generated__/textarea.props.js +0 -575
- package/lib/__generated__/vimeo-play-button.props.js +0 -563
- package/lib/__generated__/vimeo-preview-image.props.js +0 -580
- package/lib/__generated__/vimeo-spinner.props.js +0 -508
- package/lib/__generated__/vimeo.props.js +0 -665
- package/lib/blockquote.js +0 -12
- package/lib/blockquote.stories.js +0 -11
- package/lib/blockquote.ws.js +0 -75
- package/lib/body.js +0 -6
- package/lib/body.stories.js +0 -11
- package/lib/body.ws.js +0 -31
- package/lib/bold.js +0 -6
- package/lib/bold.stories.js +0 -11
- package/lib/bold.ws.js +0 -21
- package/lib/box.js +0 -12
- package/lib/box.stories.js +0 -11
- package/lib/box.ws.js +0 -44
- package/lib/button.js +0 -8
- package/lib/button.stories.js +0 -11
- package/lib/button.ws.js +0 -36
- package/lib/checkbox.js +0 -6
- package/lib/checkbox.ws.js +0 -57
- package/lib/code-text.js +0 -10
- package/lib/code-text.stories.js +0 -11
- package/lib/code-text.ws.js +0 -54
- package/lib/form.js +0 -6
- package/lib/form.stories.js +0 -11
- package/lib/form.ws.js +0 -63
- package/lib/fragment.js +0 -7
- package/lib/fragment.ws.js +0 -10
- package/lib/heading.js +0 -12
- package/lib/heading.stories.js +0 -11
- package/lib/heading.ws.js +0 -37
- package/lib/html-embed.js +0 -63
- package/lib/html-embed.stories.js +0 -11
- package/lib/html-embed.ws.js +0 -28
- package/lib/image.js +0 -74
- package/lib/image.stories.js +0 -7
- package/lib/image.ws.js +0 -48
- package/lib/input.js +0 -6
- package/lib/input.stories.js +0 -9
- package/lib/input.ws.js +0 -43
- package/lib/italic.js +0 -6
- package/lib/italic.stories.js +0 -11
- package/lib/italic.ws.js +0 -27
- package/lib/label.js +0 -6
- package/lib/label.ws.js +0 -40
- package/lib/link.js +0 -33
- package/lib/link.stories.js +0 -11
- package/lib/link.ws.js +0 -60
- package/lib/list-item.js +0 -12
- package/lib/list-item.stories.js +0 -11
- package/lib/list-item.ws.js +0 -32
- package/lib/list.js +0 -12
- package/lib/list.stories.js +0 -13
- package/lib/list.ws.js +0 -53
- package/lib/paragraph.js +0 -6
- package/lib/paragraph.stories.js +0 -11
- package/lib/paragraph.ws.js +0 -32
- package/lib/radio-button.js +0 -6
- package/lib/radio-button.ws.js +0 -58
- package/lib/rich-text-link.js +0 -6
- package/lib/rich-text-link.stories.js +0 -11
- package/lib/rich-text-link.ws.js +0 -9
- package/lib/separator.js +0 -12
- package/lib/separator.stories.js +0 -7
- package/lib/separator.ws.js +0 -50
- package/lib/slot.js +0 -14
- package/lib/slot.stories.js +0 -11
- package/lib/slot.ws.js +0 -14
- package/lib/span.js +0 -6
- package/lib/span.stories.js +0 -11
- package/lib/span.ws.js +0 -21
- package/lib/subscript.js +0 -6
- package/lib/subscript.stories.js +0 -11
- package/lib/subscript.ws.js +0 -21
- package/lib/superscript.js +0 -6
- package/lib/superscript.stories.js +0 -11
- package/lib/superscript.ws.js +0 -21
- package/lib/text.js +0 -12
- package/lib/text.stories.js +0 -11
- package/lib/text.ws.js +0 -37
- package/lib/textarea.js +0 -6
- package/lib/textarea.ws.js +0 -44
- package/lib/vimeo-play-button.js +0 -19
- package/lib/vimeo-play-button.stories.js +0 -11
- package/lib/vimeo-play-button.ws.js +0 -25
- package/lib/vimeo-preview-image.js +0 -21
- package/lib/vimeo-preview-image.stories.js +0 -11
- package/lib/vimeo-preview-image.ws.js +0 -19
- package/lib/vimeo-spinner.js +0 -18
- package/lib/vimeo-spinner.stories.js +0 -11
- package/lib/vimeo-spinner.ws.js +0 -23
- package/lib/vimeo.js +0 -279
- package/lib/vimeo.stories.js +0 -11
- package/lib/vimeo.ws.js +0 -327
package/lib/metas.js
CHANGED
|
@@ -1,33 +1,3635 @@
|
|
|
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
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
1
|
+
// src/slot.ws.ts
|
|
2
|
+
import { SlotComponentIcon } from "@webstudio-is/icons/svg";
|
|
3
|
+
var meta = {
|
|
4
|
+
category: "general",
|
|
5
|
+
type: "container",
|
|
6
|
+
label: "Slot",
|
|
7
|
+
description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
|
|
8
|
+
icon: SlotComponentIcon,
|
|
9
|
+
stylable: false,
|
|
10
|
+
order: 6
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
// src/fragment.ws.ts
|
|
14
|
+
var meta2 = {
|
|
15
|
+
type: "container",
|
|
16
|
+
label: "Fragment",
|
|
17
|
+
icon: "",
|
|
18
|
+
stylable: false
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
// src/html-embed.ws.ts
|
|
22
|
+
import { EmbedIcon } from "@webstudio-is/icons/svg";
|
|
23
|
+
|
|
24
|
+
// src/__generated__/html-embed.props.ts
|
|
25
|
+
var props = {
|
|
26
|
+
code: { required: true, control: "text", type: "string" },
|
|
27
|
+
executeScriptOnCanvas: {
|
|
28
|
+
required: true,
|
|
29
|
+
control: "boolean",
|
|
30
|
+
type: "boolean"
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
// src/html-embed.ws.ts
|
|
35
|
+
var meta3 = {
|
|
36
|
+
category: "general",
|
|
37
|
+
type: "embed",
|
|
38
|
+
label: "HTML Embed",
|
|
39
|
+
description: "Used to add HTML code to the page, such as an SVG or script.",
|
|
40
|
+
icon: EmbedIcon,
|
|
41
|
+
stylable: false,
|
|
42
|
+
order: 7
|
|
43
|
+
};
|
|
44
|
+
var propsMeta = {
|
|
45
|
+
props: {
|
|
46
|
+
...props,
|
|
47
|
+
executeScriptOnCanvas: {
|
|
48
|
+
...props.executeScriptOnCanvas,
|
|
49
|
+
label: "Run script on canvas"
|
|
50
|
+
},
|
|
51
|
+
code: {
|
|
52
|
+
required: true,
|
|
53
|
+
control: "code",
|
|
54
|
+
type: "string",
|
|
55
|
+
rows: 10
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
initialProps: []
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
// src/body.ws.tsx
|
|
62
|
+
import { BodyIcon } from "@webstudio-is/icons/svg";
|
|
63
|
+
import {
|
|
64
|
+
defaultStates
|
|
65
|
+
} from "@webstudio-is/react-sdk";
|
|
66
|
+
import { body } from "@webstudio-is/react-sdk/css-normalize";
|
|
67
|
+
var presetStyle = {
|
|
68
|
+
body: [
|
|
69
|
+
...body,
|
|
70
|
+
{
|
|
71
|
+
property: "WebkitFontSmoothing",
|
|
72
|
+
value: { type: "keyword", value: "antialiased" }
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
property: "MozOsxFontSmoothing",
|
|
76
|
+
value: { type: "keyword", value: "grayscale" }
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
};
|
|
80
|
+
var meta4 = {
|
|
81
|
+
type: "container",
|
|
82
|
+
label: "Body",
|
|
83
|
+
icon: BodyIcon,
|
|
84
|
+
states: defaultStates,
|
|
85
|
+
presetStyle
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
// src/box.ws.ts
|
|
89
|
+
import { BoxIcon } from "@webstudio-is/icons/svg";
|
|
90
|
+
import {
|
|
91
|
+
defaultStates as defaultStates2
|
|
92
|
+
} from "@webstudio-is/react-sdk";
|
|
93
|
+
import {
|
|
94
|
+
div,
|
|
95
|
+
address,
|
|
96
|
+
article,
|
|
97
|
+
aside,
|
|
98
|
+
figure,
|
|
99
|
+
footer,
|
|
100
|
+
header,
|
|
101
|
+
main,
|
|
102
|
+
nav,
|
|
103
|
+
section
|
|
104
|
+
} from "@webstudio-is/react-sdk/css-normalize";
|
|
105
|
+
var presetStyle2 = {
|
|
106
|
+
div,
|
|
107
|
+
address,
|
|
108
|
+
article,
|
|
109
|
+
aside,
|
|
110
|
+
figure,
|
|
111
|
+
footer,
|
|
112
|
+
header,
|
|
113
|
+
main,
|
|
114
|
+
nav,
|
|
115
|
+
section
|
|
116
|
+
};
|
|
117
|
+
var meta5 = {
|
|
118
|
+
category: "general",
|
|
119
|
+
type: "container",
|
|
120
|
+
label: "Box",
|
|
121
|
+
description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
|
|
122
|
+
icon: BoxIcon,
|
|
123
|
+
states: defaultStates2,
|
|
124
|
+
presetStyle: presetStyle2,
|
|
125
|
+
order: 0
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
// src/text.ws.tsx
|
|
129
|
+
import { TextIcon } from "@webstudio-is/icons/svg";
|
|
130
|
+
import {
|
|
131
|
+
defaultStates as defaultStates3
|
|
132
|
+
} from "@webstudio-is/react-sdk";
|
|
133
|
+
import { div as div2 } from "@webstudio-is/react-sdk/css-normalize";
|
|
134
|
+
var presetStyle3 = {
|
|
135
|
+
div: [
|
|
136
|
+
...div2,
|
|
137
|
+
{
|
|
138
|
+
property: "minHeight",
|
|
139
|
+
value: { type: "unit", unit: "em", value: 1 }
|
|
140
|
+
}
|
|
141
|
+
]
|
|
142
|
+
};
|
|
143
|
+
var meta6 = {
|
|
144
|
+
category: "text",
|
|
145
|
+
type: "container",
|
|
146
|
+
label: "Text",
|
|
147
|
+
description: "A generic container for any text content that is not a heading or a link.",
|
|
148
|
+
icon: TextIcon,
|
|
149
|
+
states: defaultStates3,
|
|
150
|
+
presetStyle: presetStyle3,
|
|
151
|
+
template: [
|
|
152
|
+
{
|
|
153
|
+
type: "instance",
|
|
154
|
+
component: "Text",
|
|
155
|
+
children: [{ type: "text", value: "The text you can edit" }]
|
|
156
|
+
}
|
|
157
|
+
],
|
|
158
|
+
order: 0
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
// src/heading.ws.tsx
|
|
162
|
+
import { HeadingIcon } from "@webstudio-is/icons/svg";
|
|
163
|
+
import {
|
|
164
|
+
defaultStates as defaultStates4
|
|
165
|
+
} from "@webstudio-is/react-sdk";
|
|
166
|
+
import { h1, h2, h3, h4, h5, h6 } from "@webstudio-is/react-sdk/css-normalize";
|
|
167
|
+
var presetStyle4 = {
|
|
168
|
+
h1,
|
|
169
|
+
h2,
|
|
170
|
+
h3,
|
|
171
|
+
h4,
|
|
172
|
+
h5,
|
|
173
|
+
h6
|
|
174
|
+
};
|
|
175
|
+
var meta7 = {
|
|
176
|
+
category: "text",
|
|
177
|
+
type: "container",
|
|
178
|
+
label: "Heading",
|
|
179
|
+
description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
|
|
180
|
+
icon: HeadingIcon,
|
|
181
|
+
invalidAncestors: ["Heading"],
|
|
182
|
+
states: defaultStates4,
|
|
183
|
+
presetStyle: presetStyle4,
|
|
184
|
+
template: [
|
|
185
|
+
{
|
|
186
|
+
type: "instance",
|
|
187
|
+
component: "Heading",
|
|
188
|
+
children: [{ type: "text", value: "Heading you can edit" }]
|
|
189
|
+
}
|
|
190
|
+
],
|
|
191
|
+
order: 1
|
|
192
|
+
};
|
|
193
|
+
|
|
194
|
+
// src/paragraph.ws.tsx
|
|
195
|
+
import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
|
|
196
|
+
import {
|
|
197
|
+
defaultStates as defaultStates5
|
|
198
|
+
} from "@webstudio-is/react-sdk";
|
|
199
|
+
import { p } from "@webstudio-is/react-sdk/css-normalize";
|
|
200
|
+
var presetStyle5 = {
|
|
201
|
+
p
|
|
202
|
+
};
|
|
203
|
+
var meta8 = {
|
|
204
|
+
category: "text",
|
|
205
|
+
type: "container",
|
|
206
|
+
label: "Paragraph",
|
|
207
|
+
description: "A container for multi-line text.",
|
|
208
|
+
icon: TextAlignLeftIcon,
|
|
209
|
+
invalidAncestors: ["Paragraph"],
|
|
210
|
+
states: defaultStates5,
|
|
211
|
+
presetStyle: presetStyle5,
|
|
212
|
+
template: [
|
|
213
|
+
{
|
|
214
|
+
type: "instance",
|
|
215
|
+
component: "Paragraph",
|
|
216
|
+
children: [{ type: "text", value: "Paragraph you can edit" }]
|
|
217
|
+
}
|
|
218
|
+
],
|
|
219
|
+
order: 2
|
|
220
|
+
};
|
|
221
|
+
|
|
222
|
+
// src/link.ws.tsx
|
|
223
|
+
import { LinkIcon } from "@webstudio-is/icons/svg";
|
|
224
|
+
import {
|
|
225
|
+
defaultStates as defaultStates6
|
|
226
|
+
} from "@webstudio-is/react-sdk";
|
|
227
|
+
import { a } from "@webstudio-is/react-sdk/css-normalize";
|
|
228
|
+
|
|
229
|
+
// src/__generated__/link.props.ts
|
|
230
|
+
var props2 = {
|
|
231
|
+
about: { required: false, control: "text", type: "string" },
|
|
232
|
+
accessKey: {
|
|
233
|
+
required: false,
|
|
234
|
+
control: "text",
|
|
235
|
+
type: "string",
|
|
236
|
+
description: "Keyboard shortcut to activate or add focus to the element."
|
|
237
|
+
},
|
|
238
|
+
"aria-activedescendant": {
|
|
239
|
+
description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
|
|
240
|
+
required: false,
|
|
241
|
+
control: "text",
|
|
242
|
+
type: "string"
|
|
243
|
+
},
|
|
244
|
+
"aria-atomic": {
|
|
245
|
+
description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
|
|
246
|
+
required: false,
|
|
247
|
+
control: "boolean",
|
|
248
|
+
type: "boolean"
|
|
249
|
+
},
|
|
250
|
+
"aria-autocomplete": {
|
|
251
|
+
description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
|
|
252
|
+
required: false,
|
|
253
|
+
control: "select",
|
|
254
|
+
type: "string",
|
|
255
|
+
options: ["list", "none", "inline", "both"]
|
|
256
|
+
},
|
|
257
|
+
"aria-braillelabel": {
|
|
258
|
+
description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
|
|
259
|
+
required: false,
|
|
260
|
+
control: "text",
|
|
261
|
+
type: "string"
|
|
262
|
+
},
|
|
263
|
+
"aria-brailleroledescription": {
|
|
264
|
+
description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
|
|
265
|
+
required: false,
|
|
266
|
+
control: "text",
|
|
267
|
+
type: "string"
|
|
268
|
+
},
|
|
269
|
+
"aria-busy": { required: false, control: "boolean", type: "boolean" },
|
|
270
|
+
"aria-checked": {
|
|
271
|
+
description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
|
|
272
|
+
required: false,
|
|
273
|
+
control: "text",
|
|
274
|
+
type: "string"
|
|
275
|
+
},
|
|
276
|
+
"aria-colcount": {
|
|
277
|
+
description: "Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.",
|
|
278
|
+
required: false,
|
|
279
|
+
control: "number",
|
|
280
|
+
type: "number"
|
|
281
|
+
},
|
|
282
|
+
"aria-colindex": {
|
|
283
|
+
description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.",
|
|
284
|
+
required: false,
|
|
285
|
+
control: "number",
|
|
286
|
+
type: "number"
|
|
287
|
+
},
|
|
288
|
+
"aria-colindextext": {
|
|
289
|
+
description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
|
|
290
|
+
required: false,
|
|
291
|
+
control: "text",
|
|
292
|
+
type: "string"
|
|
293
|
+
},
|
|
294
|
+
"aria-colspan": {
|
|
295
|
+
description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
|
|
296
|
+
required: false,
|
|
297
|
+
control: "number",
|
|
298
|
+
type: "number"
|
|
299
|
+
},
|
|
300
|
+
"aria-controls": {
|
|
301
|
+
description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.",
|
|
302
|
+
required: false,
|
|
303
|
+
control: "text",
|
|
304
|
+
type: "string"
|
|
305
|
+
},
|
|
306
|
+
"aria-current": {
|
|
307
|
+
description: "Indicates the element that represents the current item within a container or set of related elements.",
|
|
308
|
+
required: false,
|
|
309
|
+
control: "text",
|
|
310
|
+
type: "string"
|
|
311
|
+
},
|
|
312
|
+
"aria-describedby": {
|
|
313
|
+
description: "Identifies the element (or elements) that describes the object.\n@see aria-labelledby",
|
|
314
|
+
required: false,
|
|
315
|
+
control: "text",
|
|
316
|
+
type: "string"
|
|
317
|
+
},
|
|
318
|
+
"aria-description": {
|
|
319
|
+
description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
|
|
320
|
+
required: false,
|
|
321
|
+
control: "text",
|
|
322
|
+
type: "string"
|
|
323
|
+
},
|
|
324
|
+
"aria-details": {
|
|
325
|
+
description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
|
|
326
|
+
required: false,
|
|
327
|
+
control: "text",
|
|
328
|
+
type: "string"
|
|
329
|
+
},
|
|
330
|
+
"aria-disabled": {
|
|
331
|
+
description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.",
|
|
332
|
+
required: false,
|
|
333
|
+
control: "boolean",
|
|
334
|
+
type: "boolean"
|
|
335
|
+
},
|
|
336
|
+
"aria-dropeffect": {
|
|
337
|
+
description: "Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1",
|
|
338
|
+
required: false,
|
|
339
|
+
control: "select",
|
|
340
|
+
type: "string",
|
|
341
|
+
options: ["link", "none", "copy", "execute", "move", "popup"]
|
|
342
|
+
},
|
|
343
|
+
"aria-errormessage": {
|
|
344
|
+
description: "Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.",
|
|
345
|
+
required: false,
|
|
346
|
+
control: "text",
|
|
347
|
+
type: "string"
|
|
348
|
+
},
|
|
349
|
+
"aria-expanded": {
|
|
350
|
+
description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
|
|
351
|
+
required: false,
|
|
352
|
+
control: "boolean",
|
|
353
|
+
type: "boolean"
|
|
354
|
+
},
|
|
355
|
+
"aria-flowto": {
|
|
356
|
+
description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
|
|
357
|
+
required: false,
|
|
358
|
+
control: "text",
|
|
359
|
+
type: "string"
|
|
360
|
+
},
|
|
361
|
+
"aria-grabbed": {
|
|
362
|
+
description: `Indicates an element's "grabbed" state in a drag-and-drop operation.
|
|
363
|
+
@deprecated in ARIA 1.1`,
|
|
364
|
+
required: false,
|
|
365
|
+
control: "boolean",
|
|
366
|
+
type: "boolean"
|
|
367
|
+
},
|
|
368
|
+
"aria-haspopup": {
|
|
369
|
+
description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
|
|
370
|
+
required: false,
|
|
371
|
+
control: "text",
|
|
372
|
+
type: "string"
|
|
373
|
+
},
|
|
374
|
+
"aria-hidden": {
|
|
375
|
+
description: "Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.",
|
|
376
|
+
required: false,
|
|
377
|
+
control: "boolean",
|
|
378
|
+
type: "boolean"
|
|
379
|
+
},
|
|
380
|
+
"aria-invalid": {
|
|
381
|
+
description: "Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.",
|
|
382
|
+
required: false,
|
|
383
|
+
control: "text",
|
|
384
|
+
type: "string"
|
|
385
|
+
},
|
|
386
|
+
"aria-keyshortcuts": {
|
|
387
|
+
description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
|
|
388
|
+
required: false,
|
|
389
|
+
control: "text",
|
|
390
|
+
type: "string"
|
|
391
|
+
},
|
|
392
|
+
"aria-label": {
|
|
393
|
+
description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
|
|
394
|
+
required: false,
|
|
395
|
+
control: "text",
|
|
396
|
+
type: "string"
|
|
397
|
+
},
|
|
398
|
+
"aria-labelledby": {
|
|
399
|
+
description: "Identifies the element (or elements) that labels the current element.\n@see aria-describedby.",
|
|
400
|
+
required: false,
|
|
401
|
+
control: "text",
|
|
402
|
+
type: "string"
|
|
403
|
+
},
|
|
404
|
+
"aria-level": {
|
|
405
|
+
description: "Defines the hierarchical level of an element within a structure.",
|
|
406
|
+
required: false,
|
|
407
|
+
control: "number",
|
|
408
|
+
type: "number"
|
|
409
|
+
},
|
|
410
|
+
"aria-live": {
|
|
411
|
+
description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
|
|
412
|
+
required: false,
|
|
413
|
+
control: "radio",
|
|
414
|
+
type: "string",
|
|
415
|
+
options: ["off", "assertive", "polite"]
|
|
416
|
+
},
|
|
417
|
+
"aria-modal": {
|
|
418
|
+
description: "Indicates whether an element is modal when displayed.",
|
|
419
|
+
required: false,
|
|
420
|
+
control: "boolean",
|
|
421
|
+
type: "boolean"
|
|
422
|
+
},
|
|
423
|
+
"aria-multiline": {
|
|
424
|
+
description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
|
|
425
|
+
required: false,
|
|
426
|
+
control: "boolean",
|
|
427
|
+
type: "boolean"
|
|
428
|
+
},
|
|
429
|
+
"aria-multiselectable": {
|
|
430
|
+
description: "Indicates that the user may select more than one item from the current selectable descendants.",
|
|
431
|
+
required: false,
|
|
432
|
+
control: "boolean",
|
|
433
|
+
type: "boolean"
|
|
434
|
+
},
|
|
435
|
+
"aria-orientation": {
|
|
436
|
+
description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
|
|
437
|
+
required: false,
|
|
438
|
+
control: "radio",
|
|
439
|
+
type: "string",
|
|
440
|
+
options: ["horizontal", "vertical"]
|
|
441
|
+
},
|
|
442
|
+
"aria-owns": {
|
|
443
|
+
description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.",
|
|
444
|
+
required: false,
|
|
445
|
+
control: "text",
|
|
446
|
+
type: "string"
|
|
447
|
+
},
|
|
448
|
+
"aria-placeholder": {
|
|
449
|
+
description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
|
|
450
|
+
required: false,
|
|
451
|
+
control: "text",
|
|
452
|
+
type: "string"
|
|
453
|
+
},
|
|
454
|
+
"aria-posinset": {
|
|
455
|
+
description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.",
|
|
456
|
+
required: false,
|
|
457
|
+
control: "number",
|
|
458
|
+
type: "number"
|
|
459
|
+
},
|
|
460
|
+
"aria-pressed": {
|
|
461
|
+
description: 'Indicates the current "pressed" state of toggle buttons.\n@see aria-checked\n@see aria-selected.',
|
|
462
|
+
required: false,
|
|
463
|
+
control: "text",
|
|
464
|
+
type: "string"
|
|
465
|
+
},
|
|
466
|
+
"aria-readonly": {
|
|
467
|
+
description: "Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.",
|
|
468
|
+
required: false,
|
|
469
|
+
control: "boolean",
|
|
470
|
+
type: "boolean"
|
|
471
|
+
},
|
|
472
|
+
"aria-relevant": {
|
|
473
|
+
description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.",
|
|
474
|
+
required: false,
|
|
475
|
+
control: "select",
|
|
476
|
+
type: "string",
|
|
477
|
+
options: [
|
|
478
|
+
"text",
|
|
479
|
+
"additions",
|
|
480
|
+
"additions removals",
|
|
481
|
+
"additions text",
|
|
482
|
+
"all",
|
|
483
|
+
"removals",
|
|
484
|
+
"removals additions",
|
|
485
|
+
"removals text",
|
|
486
|
+
"text additions",
|
|
487
|
+
"text removals"
|
|
488
|
+
]
|
|
489
|
+
},
|
|
490
|
+
"aria-required": {
|
|
491
|
+
description: "Indicates that user input is required on the element before a form may be submitted.",
|
|
492
|
+
required: false,
|
|
493
|
+
control: "boolean",
|
|
494
|
+
type: "boolean"
|
|
495
|
+
},
|
|
496
|
+
"aria-roledescription": {
|
|
497
|
+
description: "Defines a human-readable, author-localized description for the role of an element.",
|
|
498
|
+
required: false,
|
|
499
|
+
control: "text",
|
|
500
|
+
type: "string"
|
|
501
|
+
},
|
|
502
|
+
"aria-rowcount": {
|
|
503
|
+
description: "Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.",
|
|
504
|
+
required: false,
|
|
505
|
+
control: "number",
|
|
506
|
+
type: "number"
|
|
507
|
+
},
|
|
508
|
+
"aria-rowindex": {
|
|
509
|
+
description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.",
|
|
510
|
+
required: false,
|
|
511
|
+
control: "number",
|
|
512
|
+
type: "number"
|
|
513
|
+
},
|
|
514
|
+
"aria-rowindextext": {
|
|
515
|
+
description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
|
|
516
|
+
required: false,
|
|
517
|
+
control: "text",
|
|
518
|
+
type: "string"
|
|
519
|
+
},
|
|
520
|
+
"aria-rowspan": {
|
|
521
|
+
description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
|
|
522
|
+
required: false,
|
|
523
|
+
control: "number",
|
|
524
|
+
type: "number"
|
|
525
|
+
},
|
|
526
|
+
"aria-selected": {
|
|
527
|
+
description: 'Indicates the current "selected" state of various widgets.\n@see aria-checked\n@see aria-pressed.',
|
|
528
|
+
required: false,
|
|
529
|
+
control: "boolean",
|
|
530
|
+
type: "boolean"
|
|
531
|
+
},
|
|
532
|
+
"aria-setsize": {
|
|
533
|
+
description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.",
|
|
534
|
+
required: false,
|
|
535
|
+
control: "number",
|
|
536
|
+
type: "number"
|
|
537
|
+
},
|
|
538
|
+
"aria-sort": {
|
|
539
|
+
description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
|
|
540
|
+
required: false,
|
|
541
|
+
control: "select",
|
|
542
|
+
type: "string",
|
|
543
|
+
options: ["none", "ascending", "descending", "other"]
|
|
544
|
+
},
|
|
545
|
+
"aria-valuemax": {
|
|
546
|
+
description: "Defines the maximum allowed value for a range widget.",
|
|
547
|
+
required: false,
|
|
548
|
+
control: "number",
|
|
549
|
+
type: "number"
|
|
550
|
+
},
|
|
551
|
+
"aria-valuemin": {
|
|
552
|
+
description: "Defines the minimum allowed value for a range widget.",
|
|
553
|
+
required: false,
|
|
554
|
+
control: "number",
|
|
555
|
+
type: "number"
|
|
556
|
+
},
|
|
557
|
+
"aria-valuenow": {
|
|
558
|
+
description: "Defines the current value for a range widget.\n@see aria-valuetext.",
|
|
559
|
+
required: false,
|
|
560
|
+
control: "number",
|
|
561
|
+
type: "number"
|
|
562
|
+
},
|
|
563
|
+
"aria-valuetext": {
|
|
564
|
+
description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
|
|
565
|
+
required: false,
|
|
566
|
+
control: "text",
|
|
567
|
+
type: "string"
|
|
568
|
+
},
|
|
569
|
+
autoCapitalize: {
|
|
570
|
+
required: false,
|
|
571
|
+
control: "text",
|
|
572
|
+
type: "string",
|
|
573
|
+
description: "Sets whether input is automatically capitalized when entered by user."
|
|
574
|
+
},
|
|
575
|
+
autoCorrect: { required: false, control: "text", type: "string" },
|
|
576
|
+
autoFocus: {
|
|
577
|
+
required: false,
|
|
578
|
+
control: "boolean",
|
|
579
|
+
type: "boolean",
|
|
580
|
+
description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
|
|
581
|
+
},
|
|
582
|
+
autoSave: { required: false, control: "text", type: "string" },
|
|
583
|
+
className: { required: false, control: "text", type: "string" },
|
|
584
|
+
color: {
|
|
585
|
+
required: false,
|
|
586
|
+
control: "color",
|
|
587
|
+
type: "string",
|
|
588
|
+
description: "This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
|
|
589
|
+
},
|
|
590
|
+
content: {
|
|
591
|
+
required: false,
|
|
592
|
+
control: "text",
|
|
593
|
+
type: "string",
|
|
594
|
+
description: "A value associated with http-equiv orname depending on the context."
|
|
595
|
+
},
|
|
596
|
+
contextMenu: {
|
|
597
|
+
required: false,
|
|
598
|
+
control: "text",
|
|
599
|
+
type: "string",
|
|
600
|
+
description: "Defines the ID of a menu element which willserve as the element's context menu."
|
|
601
|
+
},
|
|
602
|
+
datatype: { required: false, control: "text", type: "string" },
|
|
603
|
+
defaultChecked: { required: false, control: "boolean", type: "boolean" },
|
|
604
|
+
dir: {
|
|
605
|
+
required: false,
|
|
606
|
+
control: "text",
|
|
607
|
+
type: "string",
|
|
608
|
+
description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
|
|
609
|
+
},
|
|
610
|
+
draggable: {
|
|
611
|
+
required: false,
|
|
612
|
+
control: "boolean",
|
|
613
|
+
type: "boolean",
|
|
614
|
+
description: "Defines whether the element can be dragged."
|
|
615
|
+
},
|
|
616
|
+
hidden: {
|
|
617
|
+
required: false,
|
|
618
|
+
control: "boolean",
|
|
619
|
+
type: "boolean",
|
|
620
|
+
description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
|
|
621
|
+
},
|
|
622
|
+
href: {
|
|
623
|
+
required: false,
|
|
624
|
+
control: "text",
|
|
625
|
+
type: "string",
|
|
626
|
+
description: "The URL of a linked resource."
|
|
627
|
+
},
|
|
628
|
+
hrefLang: {
|
|
629
|
+
required: false,
|
|
630
|
+
control: "text",
|
|
631
|
+
type: "string",
|
|
632
|
+
description: "Specifies the language of the linked resource."
|
|
633
|
+
},
|
|
634
|
+
id: {
|
|
635
|
+
required: false,
|
|
636
|
+
control: "text",
|
|
637
|
+
type: "string",
|
|
638
|
+
description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
|
|
639
|
+
},
|
|
640
|
+
inputMode: {
|
|
641
|
+
description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
|
|
642
|
+
required: false,
|
|
643
|
+
control: "select",
|
|
644
|
+
type: "string",
|
|
645
|
+
options: [
|
|
646
|
+
"search",
|
|
647
|
+
"text",
|
|
648
|
+
"none",
|
|
649
|
+
"tel",
|
|
650
|
+
"url",
|
|
651
|
+
"email",
|
|
652
|
+
"numeric",
|
|
653
|
+
"decimal"
|
|
654
|
+
]
|
|
655
|
+
},
|
|
656
|
+
is: {
|
|
657
|
+
description: "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
|
|
658
|
+
required: false,
|
|
659
|
+
control: "text",
|
|
660
|
+
type: "string"
|
|
661
|
+
},
|
|
662
|
+
itemID: { required: false, control: "text", type: "string" },
|
|
663
|
+
itemProp: { required: false, control: "text", type: "string" },
|
|
664
|
+
itemRef: { required: false, control: "text", type: "string" },
|
|
665
|
+
itemScope: { required: false, control: "boolean", type: "boolean" },
|
|
666
|
+
itemType: { required: false, control: "text", type: "string" },
|
|
667
|
+
lang: {
|
|
668
|
+
required: false,
|
|
669
|
+
control: "text",
|
|
670
|
+
type: "string",
|
|
671
|
+
description: "Defines the language used in the element."
|
|
672
|
+
},
|
|
673
|
+
media: {
|
|
674
|
+
required: false,
|
|
675
|
+
control: "text",
|
|
676
|
+
type: "string",
|
|
677
|
+
description: "Specifies a hint of the media for which the linked resource was designed."
|
|
678
|
+
},
|
|
679
|
+
nonce: { required: false, control: "text", type: "string" },
|
|
680
|
+
ping: {
|
|
681
|
+
required: false,
|
|
682
|
+
control: "text",
|
|
683
|
+
type: "string",
|
|
684
|
+
description: "The ping attribute specifies a space-separated list of URLs to be notified if a user follows the hyperlink."
|
|
685
|
+
},
|
|
686
|
+
placeholder: {
|
|
687
|
+
required: false,
|
|
688
|
+
control: "text",
|
|
689
|
+
type: "string",
|
|
690
|
+
description: "Provides a hint to the user of what can be entered in the field."
|
|
691
|
+
},
|
|
692
|
+
prefix: { required: false, control: "text", type: "string" },
|
|
693
|
+
property: { required: false, control: "text", type: "string" },
|
|
694
|
+
radioGroup: { required: false, control: "text", type: "string" },
|
|
695
|
+
referrerPolicy: {
|
|
696
|
+
required: false,
|
|
697
|
+
control: "select",
|
|
698
|
+
type: "string",
|
|
699
|
+
options: [
|
|
700
|
+
"",
|
|
701
|
+
"no-referrer",
|
|
702
|
+
"no-referrer-when-downgrade",
|
|
703
|
+
"origin",
|
|
704
|
+
"origin-when-cross-origin",
|
|
705
|
+
"same-origin",
|
|
706
|
+
"strict-origin",
|
|
707
|
+
"strict-origin-when-cross-origin",
|
|
708
|
+
"unsafe-url"
|
|
709
|
+
],
|
|
710
|
+
description: "Specifies which referrer is sent when fetching the resource."
|
|
711
|
+
},
|
|
712
|
+
rel: {
|
|
713
|
+
required: false,
|
|
714
|
+
control: "text",
|
|
715
|
+
type: "string",
|
|
716
|
+
description: "Specifies the relationship of the target object to the link object."
|
|
717
|
+
},
|
|
718
|
+
resource: { required: false, control: "text", type: "string" },
|
|
719
|
+
results: { required: false, control: "number", type: "number" },
|
|
720
|
+
rev: { required: false, control: "text", type: "string" },
|
|
721
|
+
role: {
|
|
722
|
+
required: false,
|
|
723
|
+
control: "text",
|
|
724
|
+
type: "string",
|
|
725
|
+
description: "Defines an explicit role for an element for use by assistive technologies."
|
|
726
|
+
},
|
|
727
|
+
security: { required: false, control: "text", type: "string" },
|
|
728
|
+
slot: {
|
|
729
|
+
required: false,
|
|
730
|
+
control: "text",
|
|
731
|
+
type: "string",
|
|
732
|
+
description: "Assigns a slot in a shadow DOM shadow tree to an element."
|
|
733
|
+
},
|
|
734
|
+
spellCheck: {
|
|
735
|
+
required: false,
|
|
736
|
+
control: "boolean",
|
|
737
|
+
type: "boolean",
|
|
738
|
+
description: "Indicates whether spell checking is allowed for the element."
|
|
739
|
+
},
|
|
740
|
+
suppressContentEditableWarning: {
|
|
741
|
+
required: false,
|
|
742
|
+
control: "boolean",
|
|
743
|
+
type: "boolean"
|
|
744
|
+
},
|
|
745
|
+
suppressHydrationWarning: {
|
|
746
|
+
required: false,
|
|
747
|
+
control: "boolean",
|
|
748
|
+
type: "boolean"
|
|
749
|
+
},
|
|
750
|
+
tabIndex: {
|
|
751
|
+
required: false,
|
|
752
|
+
control: "number",
|
|
753
|
+
type: "number",
|
|
754
|
+
description: "Overrides the browser's default tab order and follows the one specified instead."
|
|
755
|
+
},
|
|
756
|
+
target: {
|
|
757
|
+
required: false,
|
|
758
|
+
control: "select",
|
|
759
|
+
type: "string",
|
|
760
|
+
options: ["_self", "_blank", "_parent", "_top"],
|
|
761
|
+
description: "Specifies where to open the linked document (in the case of an <a> element) or where to display the response received (in the case of a <form> element)"
|
|
762
|
+
},
|
|
763
|
+
title: {
|
|
764
|
+
required: false,
|
|
765
|
+
control: "text",
|
|
766
|
+
type: "string",
|
|
767
|
+
description: "Text to be displayed in a tooltip when hovering over the element."
|
|
768
|
+
},
|
|
769
|
+
translate: {
|
|
770
|
+
required: false,
|
|
771
|
+
control: "radio",
|
|
772
|
+
type: "string",
|
|
773
|
+
options: ["yes", "no"],
|
|
774
|
+
description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
|
|
775
|
+
},
|
|
776
|
+
type: {
|
|
777
|
+
required: false,
|
|
778
|
+
control: "text",
|
|
779
|
+
type: "string",
|
|
780
|
+
description: "Defines the type of the element."
|
|
781
|
+
},
|
|
782
|
+
typeof: { required: false, control: "text", type: "string" },
|
|
783
|
+
unselectable: {
|
|
784
|
+
required: false,
|
|
785
|
+
control: "radio",
|
|
786
|
+
type: "string",
|
|
787
|
+
options: ["on", "off"]
|
|
788
|
+
},
|
|
789
|
+
vocab: { required: false, control: "text", type: "string" }
|
|
790
|
+
};
|
|
791
|
+
|
|
792
|
+
// src/link.ws.tsx
|
|
793
|
+
var presetStyle6 = {
|
|
794
|
+
a: [
|
|
795
|
+
...a,
|
|
796
|
+
{
|
|
797
|
+
property: "minHeight",
|
|
798
|
+
value: { type: "unit", unit: "em", value: 1 }
|
|
799
|
+
},
|
|
800
|
+
{
|
|
801
|
+
property: "display",
|
|
802
|
+
value: { type: "keyword", value: "inline-block" }
|
|
803
|
+
}
|
|
804
|
+
]
|
|
805
|
+
};
|
|
806
|
+
var meta9 = {
|
|
807
|
+
category: "general",
|
|
808
|
+
type: "container",
|
|
809
|
+
label: "Link",
|
|
810
|
+
description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
|
|
811
|
+
icon: LinkIcon,
|
|
812
|
+
invalidAncestors: ["Link"],
|
|
813
|
+
presetStyle: presetStyle6,
|
|
814
|
+
order: 1,
|
|
815
|
+
states: [
|
|
816
|
+
...defaultStates6,
|
|
817
|
+
{
|
|
818
|
+
selector: ":visited",
|
|
819
|
+
label: "Visited"
|
|
820
|
+
},
|
|
821
|
+
{
|
|
822
|
+
category: "component-states",
|
|
823
|
+
selector: "[aria-current=page]",
|
|
824
|
+
label: "Current page"
|
|
825
|
+
}
|
|
826
|
+
],
|
|
827
|
+
template: [
|
|
828
|
+
{
|
|
829
|
+
type: "instance",
|
|
830
|
+
component: "Link",
|
|
831
|
+
children: [{ type: "text", value: "Link text you can edit" }]
|
|
832
|
+
}
|
|
833
|
+
]
|
|
834
|
+
};
|
|
835
|
+
var propsMeta2 = {
|
|
836
|
+
props: {
|
|
837
|
+
...props2,
|
|
838
|
+
href: {
|
|
839
|
+
type: "string",
|
|
840
|
+
control: "url",
|
|
841
|
+
required: false
|
|
842
|
+
}
|
|
843
|
+
},
|
|
844
|
+
initialProps: ["id", "href", "target"]
|
|
845
|
+
};
|
|
846
|
+
|
|
847
|
+
// src/rich-text-link.ws.tsx
|
|
848
|
+
var meta10 = {
|
|
849
|
+
...meta9,
|
|
850
|
+
category: "hidden",
|
|
851
|
+
type: "rich-text-child",
|
|
852
|
+
template: []
|
|
853
|
+
};
|
|
854
|
+
|
|
855
|
+
// src/span.ws.tsx
|
|
856
|
+
import { PaintBrushIcon } from "@webstudio-is/icons/svg";
|
|
857
|
+
import {
|
|
858
|
+
defaultStates as defaultStates7
|
|
859
|
+
} from "@webstudio-is/react-sdk";
|
|
860
|
+
import { span } from "@webstudio-is/react-sdk/css-normalize";
|
|
861
|
+
var presetStyle7 = {
|
|
862
|
+
span
|
|
863
|
+
};
|
|
864
|
+
var meta11 = {
|
|
865
|
+
type: "rich-text-child",
|
|
866
|
+
label: "Text",
|
|
867
|
+
icon: PaintBrushIcon,
|
|
868
|
+
states: defaultStates7,
|
|
869
|
+
presetStyle: presetStyle7
|
|
870
|
+
};
|
|
871
|
+
|
|
872
|
+
// src/bold.ws.tsx
|
|
873
|
+
import { BoldIcon } from "@webstudio-is/icons/svg";
|
|
874
|
+
import {
|
|
875
|
+
defaultStates as defaultStates8
|
|
876
|
+
} from "@webstudio-is/react-sdk";
|
|
877
|
+
import { b } from "@webstudio-is/react-sdk/css-normalize";
|
|
878
|
+
var presetStyle8 = {
|
|
879
|
+
b
|
|
880
|
+
};
|
|
881
|
+
var meta12 = {
|
|
882
|
+
type: "rich-text-child",
|
|
883
|
+
label: "Bold Text",
|
|
884
|
+
icon: BoldIcon,
|
|
885
|
+
states: defaultStates8,
|
|
886
|
+
presetStyle: presetStyle8
|
|
887
|
+
};
|
|
888
|
+
|
|
889
|
+
// src/italic.ws.tsx
|
|
890
|
+
import { TextItalicIcon } from "@webstudio-is/icons/svg";
|
|
891
|
+
import {
|
|
892
|
+
defaultStates as defaultStates9
|
|
893
|
+
} from "@webstudio-is/react-sdk";
|
|
894
|
+
import { i } from "@webstudio-is/react-sdk/css-normalize";
|
|
895
|
+
var presetStyle9 = {
|
|
896
|
+
i: [
|
|
897
|
+
...i,
|
|
898
|
+
{
|
|
899
|
+
property: "fontStyle",
|
|
900
|
+
value: { type: "keyword", value: "italic" }
|
|
901
|
+
}
|
|
902
|
+
]
|
|
903
|
+
};
|
|
904
|
+
var meta13 = {
|
|
905
|
+
type: "rich-text-child",
|
|
906
|
+
label: "Italic Text",
|
|
907
|
+
icon: TextItalicIcon,
|
|
908
|
+
states: defaultStates9,
|
|
909
|
+
presetStyle: presetStyle9
|
|
910
|
+
};
|
|
911
|
+
|
|
912
|
+
// src/superscript.ws.tsx
|
|
913
|
+
import { SuperscriptIcon } from "@webstudio-is/icons/svg";
|
|
914
|
+
import {
|
|
915
|
+
defaultStates as defaultStates10
|
|
916
|
+
} from "@webstudio-is/react-sdk";
|
|
917
|
+
import { sup } from "@webstudio-is/react-sdk/css-normalize";
|
|
918
|
+
var presetStyle10 = {
|
|
919
|
+
sup
|
|
920
|
+
};
|
|
921
|
+
var meta14 = {
|
|
922
|
+
type: "rich-text-child",
|
|
923
|
+
label: "Superscript Text",
|
|
924
|
+
icon: SuperscriptIcon,
|
|
925
|
+
states: defaultStates10,
|
|
926
|
+
presetStyle: presetStyle10
|
|
927
|
+
};
|
|
928
|
+
|
|
929
|
+
// src/subscript.ws.tsx
|
|
930
|
+
import { SubscriptIcon } from "@webstudio-is/icons/svg";
|
|
931
|
+
import {
|
|
932
|
+
defaultStates as defaultStates11
|
|
933
|
+
} from "@webstudio-is/react-sdk";
|
|
934
|
+
import { sub } from "@webstudio-is/react-sdk/css-normalize";
|
|
935
|
+
var presetStyle11 = {
|
|
936
|
+
sub
|
|
937
|
+
};
|
|
938
|
+
var meta15 = {
|
|
939
|
+
type: "rich-text-child",
|
|
940
|
+
label: "Subscript Text",
|
|
941
|
+
icon: SubscriptIcon,
|
|
942
|
+
states: defaultStates11,
|
|
943
|
+
presetStyle: presetStyle11
|
|
944
|
+
};
|
|
945
|
+
|
|
946
|
+
// src/button.ws.tsx
|
|
947
|
+
import { ButtonElementIcon } from "@webstudio-is/icons/svg";
|
|
948
|
+
import {
|
|
949
|
+
defaultStates as defaultStates12
|
|
950
|
+
} from "@webstudio-is/react-sdk";
|
|
951
|
+
import { button } from "@webstudio-is/react-sdk/css-normalize";
|
|
952
|
+
var presetStyle12 = {
|
|
953
|
+
button
|
|
954
|
+
};
|
|
955
|
+
var meta16 = {
|
|
956
|
+
category: "forms",
|
|
957
|
+
type: "container",
|
|
958
|
+
invalidAncestors: ["Button"],
|
|
959
|
+
label: "Button",
|
|
960
|
+
description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that\u2019s what a link is used for.",
|
|
961
|
+
icon: ButtonElementIcon,
|
|
962
|
+
presetStyle: presetStyle12,
|
|
963
|
+
states: [
|
|
964
|
+
...defaultStates12,
|
|
965
|
+
{ selector: ":disabled", label: "Disabled" },
|
|
966
|
+
{ selector: ":enabled", label: "Enabled" }
|
|
967
|
+
],
|
|
968
|
+
order: 1,
|
|
969
|
+
template: [
|
|
970
|
+
{
|
|
971
|
+
type: "instance",
|
|
972
|
+
component: "Button",
|
|
973
|
+
children: [{ type: "text", value: "Button you can edit" }]
|
|
974
|
+
}
|
|
975
|
+
]
|
|
976
|
+
};
|
|
977
|
+
|
|
978
|
+
// src/input.ws.tsx
|
|
979
|
+
import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
|
|
980
|
+
import {
|
|
981
|
+
defaultStates as defaultStates13
|
|
982
|
+
} from "@webstudio-is/react-sdk";
|
|
983
|
+
import { input } from "@webstudio-is/react-sdk/css-normalize";
|
|
984
|
+
var presetStyle13 = {
|
|
985
|
+
input: [
|
|
986
|
+
...input,
|
|
987
|
+
{
|
|
988
|
+
property: "display",
|
|
989
|
+
value: { type: "keyword", value: "block" }
|
|
990
|
+
}
|
|
991
|
+
]
|
|
992
|
+
};
|
|
993
|
+
var meta17 = {
|
|
994
|
+
category: "forms",
|
|
995
|
+
invalidAncestors: ["Button"],
|
|
996
|
+
type: "control",
|
|
997
|
+
label: "Text Input",
|
|
998
|
+
description: "A single-line text input for collecting string data from your users.",
|
|
999
|
+
icon: FormTextFieldIcon,
|
|
1000
|
+
presetStyle: presetStyle13,
|
|
1001
|
+
order: 3,
|
|
1002
|
+
states: [
|
|
1003
|
+
...defaultStates13,
|
|
1004
|
+
{ selector: "::placeholder", label: "Placeholder" },
|
|
1005
|
+
{ selector: ":valid", label: "Valid" },
|
|
1006
|
+
{ selector: ":invalid", label: "Invalid" },
|
|
1007
|
+
{ selector: ":required", label: "Required" },
|
|
1008
|
+
{ selector: ":optional", label: "Optional" }
|
|
1009
|
+
// Additional states will go into submenu
|
|
1010
|
+
//{ selector: ":disabled", label: "Disabled" },
|
|
1011
|
+
//{ selector: ":enabled", label: "Enabled" },
|
|
1012
|
+
//{ selector: ":read-only", label: "Read Only" },
|
|
1013
|
+
//{ selector: ":read-write", label: "Read Write" },
|
|
1014
|
+
]
|
|
1015
|
+
};
|
|
1016
|
+
|
|
1017
|
+
// src/form.ws.tsx
|
|
1018
|
+
import { FormIcon } from "@webstudio-is/icons/svg";
|
|
1019
|
+
import {
|
|
1020
|
+
defaultStates as defaultStates14
|
|
1021
|
+
} from "@webstudio-is/react-sdk";
|
|
1022
|
+
import { form } from "@webstudio-is/react-sdk/css-normalize";
|
|
1023
|
+
var presetStyle14 = {
|
|
1024
|
+
form: [
|
|
1025
|
+
...form,
|
|
1026
|
+
{ property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
|
|
1027
|
+
]
|
|
1028
|
+
};
|
|
1029
|
+
var meta18 = {
|
|
1030
|
+
category: "forms",
|
|
1031
|
+
type: "container",
|
|
1032
|
+
invalidAncestors: ["Form"],
|
|
1033
|
+
label: "Form",
|
|
1034
|
+
description: "Collect information from your users using validation rules.",
|
|
1035
|
+
icon: FormIcon,
|
|
1036
|
+
states: defaultStates14,
|
|
1037
|
+
presetStyle: presetStyle14,
|
|
1038
|
+
order: 0,
|
|
1039
|
+
template: [
|
|
1040
|
+
{
|
|
1041
|
+
type: "instance",
|
|
1042
|
+
component: "Form",
|
|
1043
|
+
children: [
|
|
1044
|
+
{
|
|
1045
|
+
type: "instance",
|
|
1046
|
+
component: "Label",
|
|
1047
|
+
children: [{ type: "text", value: "Name" }]
|
|
1048
|
+
},
|
|
1049
|
+
{
|
|
1050
|
+
type: "instance",
|
|
1051
|
+
component: "Input",
|
|
1052
|
+
props: [{ type: "string", name: "name", value: "name" }],
|
|
1053
|
+
children: []
|
|
1054
|
+
},
|
|
1055
|
+
{
|
|
1056
|
+
type: "instance",
|
|
1057
|
+
component: "Label",
|
|
1058
|
+
children: [{ type: "text", value: "Email" }]
|
|
1059
|
+
},
|
|
1060
|
+
{
|
|
1061
|
+
type: "instance",
|
|
1062
|
+
component: "Input",
|
|
1063
|
+
props: [{ type: "string", name: "name", value: "email" }],
|
|
1064
|
+
children: []
|
|
1065
|
+
},
|
|
1066
|
+
{
|
|
1067
|
+
type: "instance",
|
|
1068
|
+
component: "Button",
|
|
1069
|
+
children: [{ type: "text", value: "Submit" }]
|
|
1070
|
+
}
|
|
1071
|
+
]
|
|
1072
|
+
}
|
|
1073
|
+
]
|
|
1074
|
+
};
|
|
1075
|
+
|
|
1076
|
+
// src/image.ws.tsx
|
|
1077
|
+
import { ImageIcon } from "@webstudio-is/icons/svg";
|
|
1078
|
+
import {
|
|
1079
|
+
defaultStates as defaultStates15
|
|
1080
|
+
} from "@webstudio-is/react-sdk";
|
|
1081
|
+
import { img } from "@webstudio-is/react-sdk/css-normalize";
|
|
1082
|
+
|
|
1083
|
+
// src/__generated__/image.props.ts
|
|
1084
|
+
var props3 = {
|
|
1085
|
+
about: { required: false, control: "text", type: "string" },
|
|
1086
|
+
accessKey: {
|
|
1087
|
+
required: false,
|
|
1088
|
+
control: "text",
|
|
1089
|
+
type: "string",
|
|
1090
|
+
description: "Keyboard shortcut to activate or add focus to the element."
|
|
1091
|
+
},
|
|
1092
|
+
alt: {
|
|
1093
|
+
required: false,
|
|
1094
|
+
control: "text",
|
|
1095
|
+
type: "string",
|
|
1096
|
+
description: "Text description of the image, which is very important for accessibility and search engine optimization. Screen readers read this description to users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason."
|
|
1097
|
+
},
|
|
1098
|
+
"aria-activedescendant": {
|
|
1099
|
+
description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
|
|
1100
|
+
required: false,
|
|
1101
|
+
control: "text",
|
|
1102
|
+
type: "string"
|
|
1103
|
+
},
|
|
1104
|
+
"aria-atomic": {
|
|
1105
|
+
description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
|
|
1106
|
+
required: false,
|
|
1107
|
+
control: "boolean",
|
|
1108
|
+
type: "boolean"
|
|
1109
|
+
},
|
|
1110
|
+
"aria-autocomplete": {
|
|
1111
|
+
description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
|
|
1112
|
+
required: false,
|
|
1113
|
+
control: "select",
|
|
1114
|
+
type: "string",
|
|
1115
|
+
options: ["list", "none", "inline", "both"]
|
|
1116
|
+
},
|
|
1117
|
+
"aria-braillelabel": {
|
|
1118
|
+
description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
|
|
1119
|
+
required: false,
|
|
1120
|
+
control: "text",
|
|
1121
|
+
type: "string"
|
|
1122
|
+
},
|
|
1123
|
+
"aria-brailleroledescription": {
|
|
1124
|
+
description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
|
|
1125
|
+
required: false,
|
|
1126
|
+
control: "text",
|
|
1127
|
+
type: "string"
|
|
1128
|
+
},
|
|
1129
|
+
"aria-busy": { required: false, control: "boolean", type: "boolean" },
|
|
1130
|
+
"aria-checked": {
|
|
1131
|
+
description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
|
|
1132
|
+
required: false,
|
|
1133
|
+
control: "text",
|
|
1134
|
+
type: "string"
|
|
1135
|
+
},
|
|
1136
|
+
"aria-colcount": {
|
|
1137
|
+
description: "Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.",
|
|
1138
|
+
required: false,
|
|
1139
|
+
control: "number",
|
|
1140
|
+
type: "number"
|
|
1141
|
+
},
|
|
1142
|
+
"aria-colindex": {
|
|
1143
|
+
description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.",
|
|
1144
|
+
required: false,
|
|
1145
|
+
control: "number",
|
|
1146
|
+
type: "number"
|
|
1147
|
+
},
|
|
1148
|
+
"aria-colindextext": {
|
|
1149
|
+
description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
|
|
1150
|
+
required: false,
|
|
1151
|
+
control: "text",
|
|
1152
|
+
type: "string"
|
|
1153
|
+
},
|
|
1154
|
+
"aria-colspan": {
|
|
1155
|
+
description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
|
|
1156
|
+
required: false,
|
|
1157
|
+
control: "number",
|
|
1158
|
+
type: "number"
|
|
1159
|
+
},
|
|
1160
|
+
"aria-controls": {
|
|
1161
|
+
description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.",
|
|
1162
|
+
required: false,
|
|
1163
|
+
control: "text",
|
|
1164
|
+
type: "string"
|
|
1165
|
+
},
|
|
1166
|
+
"aria-current": {
|
|
1167
|
+
description: "Indicates the element that represents the current item within a container or set of related elements.",
|
|
1168
|
+
required: false,
|
|
1169
|
+
control: "text",
|
|
1170
|
+
type: "string"
|
|
1171
|
+
},
|
|
1172
|
+
"aria-describedby": {
|
|
1173
|
+
description: "Identifies the element (or elements) that describes the object.\n@see aria-labelledby",
|
|
1174
|
+
required: false,
|
|
1175
|
+
control: "text",
|
|
1176
|
+
type: "string"
|
|
1177
|
+
},
|
|
1178
|
+
"aria-description": {
|
|
1179
|
+
description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
|
|
1180
|
+
required: false,
|
|
1181
|
+
control: "text",
|
|
1182
|
+
type: "string"
|
|
1183
|
+
},
|
|
1184
|
+
"aria-details": {
|
|
1185
|
+
description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
|
|
1186
|
+
required: false,
|
|
1187
|
+
control: "text",
|
|
1188
|
+
type: "string"
|
|
1189
|
+
},
|
|
1190
|
+
"aria-disabled": {
|
|
1191
|
+
description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.",
|
|
1192
|
+
required: false,
|
|
1193
|
+
control: "boolean",
|
|
1194
|
+
type: "boolean"
|
|
1195
|
+
},
|
|
1196
|
+
"aria-dropeffect": {
|
|
1197
|
+
description: "Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1",
|
|
1198
|
+
required: false,
|
|
1199
|
+
control: "select",
|
|
1200
|
+
type: "string",
|
|
1201
|
+
options: ["link", "none", "copy", "execute", "move", "popup"]
|
|
1202
|
+
},
|
|
1203
|
+
"aria-errormessage": {
|
|
1204
|
+
description: "Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.",
|
|
1205
|
+
required: false,
|
|
1206
|
+
control: "text",
|
|
1207
|
+
type: "string"
|
|
1208
|
+
},
|
|
1209
|
+
"aria-expanded": {
|
|
1210
|
+
description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
|
|
1211
|
+
required: false,
|
|
1212
|
+
control: "boolean",
|
|
1213
|
+
type: "boolean"
|
|
1214
|
+
},
|
|
1215
|
+
"aria-flowto": {
|
|
1216
|
+
description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
|
|
1217
|
+
required: false,
|
|
1218
|
+
control: "text",
|
|
1219
|
+
type: "string"
|
|
1220
|
+
},
|
|
1221
|
+
"aria-grabbed": {
|
|
1222
|
+
description: `Indicates an element's "grabbed" state in a drag-and-drop operation.
|
|
1223
|
+
@deprecated in ARIA 1.1`,
|
|
1224
|
+
required: false,
|
|
1225
|
+
control: "boolean",
|
|
1226
|
+
type: "boolean"
|
|
1227
|
+
},
|
|
1228
|
+
"aria-haspopup": {
|
|
1229
|
+
description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
|
|
1230
|
+
required: false,
|
|
1231
|
+
control: "text",
|
|
1232
|
+
type: "string"
|
|
1233
|
+
},
|
|
1234
|
+
"aria-hidden": {
|
|
1235
|
+
description: "Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.",
|
|
1236
|
+
required: false,
|
|
1237
|
+
control: "boolean",
|
|
1238
|
+
type: "boolean"
|
|
1239
|
+
},
|
|
1240
|
+
"aria-invalid": {
|
|
1241
|
+
description: "Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.",
|
|
1242
|
+
required: false,
|
|
1243
|
+
control: "text",
|
|
1244
|
+
type: "string"
|
|
1245
|
+
},
|
|
1246
|
+
"aria-keyshortcuts": {
|
|
1247
|
+
description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
|
|
1248
|
+
required: false,
|
|
1249
|
+
control: "text",
|
|
1250
|
+
type: "string"
|
|
1251
|
+
},
|
|
1252
|
+
"aria-label": {
|
|
1253
|
+
description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
|
|
1254
|
+
required: false,
|
|
1255
|
+
control: "text",
|
|
1256
|
+
type: "string"
|
|
1257
|
+
},
|
|
1258
|
+
"aria-labelledby": {
|
|
1259
|
+
description: "Identifies the element (or elements) that labels the current element.\n@see aria-describedby.",
|
|
1260
|
+
required: false,
|
|
1261
|
+
control: "text",
|
|
1262
|
+
type: "string"
|
|
1263
|
+
},
|
|
1264
|
+
"aria-level": {
|
|
1265
|
+
description: "Defines the hierarchical level of an element within a structure.",
|
|
1266
|
+
required: false,
|
|
1267
|
+
control: "number",
|
|
1268
|
+
type: "number"
|
|
1269
|
+
},
|
|
1270
|
+
"aria-live": {
|
|
1271
|
+
description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
|
|
1272
|
+
required: false,
|
|
1273
|
+
control: "radio",
|
|
1274
|
+
type: "string",
|
|
1275
|
+
options: ["off", "assertive", "polite"]
|
|
1276
|
+
},
|
|
1277
|
+
"aria-modal": {
|
|
1278
|
+
description: "Indicates whether an element is modal when displayed.",
|
|
1279
|
+
required: false,
|
|
1280
|
+
control: "boolean",
|
|
1281
|
+
type: "boolean"
|
|
1282
|
+
},
|
|
1283
|
+
"aria-multiline": {
|
|
1284
|
+
description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
|
|
1285
|
+
required: false,
|
|
1286
|
+
control: "boolean",
|
|
1287
|
+
type: "boolean"
|
|
1288
|
+
},
|
|
1289
|
+
"aria-multiselectable": {
|
|
1290
|
+
description: "Indicates that the user may select more than one item from the current selectable descendants.",
|
|
1291
|
+
required: false,
|
|
1292
|
+
control: "boolean",
|
|
1293
|
+
type: "boolean"
|
|
1294
|
+
},
|
|
1295
|
+
"aria-orientation": {
|
|
1296
|
+
description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
|
|
1297
|
+
required: false,
|
|
1298
|
+
control: "radio",
|
|
1299
|
+
type: "string",
|
|
1300
|
+
options: ["horizontal", "vertical"]
|
|
1301
|
+
},
|
|
1302
|
+
"aria-owns": {
|
|
1303
|
+
description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.",
|
|
1304
|
+
required: false,
|
|
1305
|
+
control: "text",
|
|
1306
|
+
type: "string"
|
|
1307
|
+
},
|
|
1308
|
+
"aria-placeholder": {
|
|
1309
|
+
description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
|
|
1310
|
+
required: false,
|
|
1311
|
+
control: "text",
|
|
1312
|
+
type: "string"
|
|
1313
|
+
},
|
|
1314
|
+
"aria-posinset": {
|
|
1315
|
+
description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.",
|
|
1316
|
+
required: false,
|
|
1317
|
+
control: "number",
|
|
1318
|
+
type: "number"
|
|
1319
|
+
},
|
|
1320
|
+
"aria-pressed": {
|
|
1321
|
+
description: 'Indicates the current "pressed" state of toggle buttons.\n@see aria-checked\n@see aria-selected.',
|
|
1322
|
+
required: false,
|
|
1323
|
+
control: "text",
|
|
1324
|
+
type: "string"
|
|
1325
|
+
},
|
|
1326
|
+
"aria-readonly": {
|
|
1327
|
+
description: "Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.",
|
|
1328
|
+
required: false,
|
|
1329
|
+
control: "boolean",
|
|
1330
|
+
type: "boolean"
|
|
1331
|
+
},
|
|
1332
|
+
"aria-relevant": {
|
|
1333
|
+
description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.",
|
|
1334
|
+
required: false,
|
|
1335
|
+
control: "select",
|
|
1336
|
+
type: "string",
|
|
1337
|
+
options: [
|
|
1338
|
+
"text",
|
|
1339
|
+
"additions",
|
|
1340
|
+
"additions removals",
|
|
1341
|
+
"additions text",
|
|
1342
|
+
"all",
|
|
1343
|
+
"removals",
|
|
1344
|
+
"removals additions",
|
|
1345
|
+
"removals text",
|
|
1346
|
+
"text additions",
|
|
1347
|
+
"text removals"
|
|
1348
|
+
]
|
|
1349
|
+
},
|
|
1350
|
+
"aria-required": {
|
|
1351
|
+
description: "Indicates that user input is required on the element before a form may be submitted.",
|
|
1352
|
+
required: false,
|
|
1353
|
+
control: "boolean",
|
|
1354
|
+
type: "boolean"
|
|
1355
|
+
},
|
|
1356
|
+
"aria-roledescription": {
|
|
1357
|
+
description: "Defines a human-readable, author-localized description for the role of an element.",
|
|
1358
|
+
required: false,
|
|
1359
|
+
control: "text",
|
|
1360
|
+
type: "string"
|
|
1361
|
+
},
|
|
1362
|
+
"aria-rowcount": {
|
|
1363
|
+
description: "Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.",
|
|
1364
|
+
required: false,
|
|
1365
|
+
control: "number",
|
|
1366
|
+
type: "number"
|
|
1367
|
+
},
|
|
1368
|
+
"aria-rowindex": {
|
|
1369
|
+
description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.",
|
|
1370
|
+
required: false,
|
|
1371
|
+
control: "number",
|
|
1372
|
+
type: "number"
|
|
1373
|
+
},
|
|
1374
|
+
"aria-rowindextext": {
|
|
1375
|
+
description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
|
|
1376
|
+
required: false,
|
|
1377
|
+
control: "text",
|
|
1378
|
+
type: "string"
|
|
1379
|
+
},
|
|
1380
|
+
"aria-rowspan": {
|
|
1381
|
+
description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
|
|
1382
|
+
required: false,
|
|
1383
|
+
control: "number",
|
|
1384
|
+
type: "number"
|
|
1385
|
+
},
|
|
1386
|
+
"aria-selected": {
|
|
1387
|
+
description: 'Indicates the current "selected" state of various widgets.\n@see aria-checked\n@see aria-pressed.',
|
|
1388
|
+
required: false,
|
|
1389
|
+
control: "boolean",
|
|
1390
|
+
type: "boolean"
|
|
1391
|
+
},
|
|
1392
|
+
"aria-setsize": {
|
|
1393
|
+
description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.",
|
|
1394
|
+
required: false,
|
|
1395
|
+
control: "number",
|
|
1396
|
+
type: "number"
|
|
1397
|
+
},
|
|
1398
|
+
"aria-sort": {
|
|
1399
|
+
description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
|
|
1400
|
+
required: false,
|
|
1401
|
+
control: "select",
|
|
1402
|
+
type: "string",
|
|
1403
|
+
options: ["none", "ascending", "descending", "other"]
|
|
1404
|
+
},
|
|
1405
|
+
"aria-valuemax": {
|
|
1406
|
+
description: "Defines the maximum allowed value for a range widget.",
|
|
1407
|
+
required: false,
|
|
1408
|
+
control: "number",
|
|
1409
|
+
type: "number"
|
|
1410
|
+
},
|
|
1411
|
+
"aria-valuemin": {
|
|
1412
|
+
description: "Defines the minimum allowed value for a range widget.",
|
|
1413
|
+
required: false,
|
|
1414
|
+
control: "number",
|
|
1415
|
+
type: "number"
|
|
1416
|
+
},
|
|
1417
|
+
"aria-valuenow": {
|
|
1418
|
+
description: "Defines the current value for a range widget.\n@see aria-valuetext.",
|
|
1419
|
+
required: false,
|
|
1420
|
+
control: "number",
|
|
1421
|
+
type: "number"
|
|
1422
|
+
},
|
|
1423
|
+
"aria-valuetext": {
|
|
1424
|
+
description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
|
|
1425
|
+
required: false,
|
|
1426
|
+
control: "text",
|
|
1427
|
+
type: "string"
|
|
1428
|
+
},
|
|
1429
|
+
autoCapitalize: {
|
|
1430
|
+
required: false,
|
|
1431
|
+
control: "text",
|
|
1432
|
+
type: "string",
|
|
1433
|
+
description: "Sets whether input is automatically capitalized when entered by user."
|
|
1434
|
+
},
|
|
1435
|
+
autoCorrect: { required: false, control: "text", type: "string" },
|
|
1436
|
+
autoFocus: {
|
|
1437
|
+
required: false,
|
|
1438
|
+
control: "boolean",
|
|
1439
|
+
type: "boolean",
|
|
1440
|
+
description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
|
|
1441
|
+
},
|
|
1442
|
+
autoSave: { required: false, control: "text", type: "string" },
|
|
1443
|
+
className: { required: false, control: "text", type: "string" },
|
|
1444
|
+
color: {
|
|
1445
|
+
required: false,
|
|
1446
|
+
control: "color",
|
|
1447
|
+
type: "string",
|
|
1448
|
+
description: "This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
|
|
1449
|
+
},
|
|
1450
|
+
content: {
|
|
1451
|
+
required: false,
|
|
1452
|
+
control: "text",
|
|
1453
|
+
type: "string",
|
|
1454
|
+
description: "A value associated with http-equiv orname depending on the context."
|
|
1455
|
+
},
|
|
1456
|
+
contextMenu: {
|
|
1457
|
+
required: false,
|
|
1458
|
+
control: "text",
|
|
1459
|
+
type: "string",
|
|
1460
|
+
description: "Defines the ID of a menu element which willserve as the element's context menu."
|
|
1461
|
+
},
|
|
1462
|
+
crossOrigin: {
|
|
1463
|
+
required: false,
|
|
1464
|
+
control: "radio",
|
|
1465
|
+
type: "string",
|
|
1466
|
+
options: ["", "anonymous", "use-credentials"],
|
|
1467
|
+
description: "How the element handles cross-origin requests"
|
|
1468
|
+
},
|
|
1469
|
+
datatype: { required: false, control: "text", type: "string" },
|
|
1470
|
+
decoding: {
|
|
1471
|
+
required: false,
|
|
1472
|
+
control: "radio",
|
|
1473
|
+
type: "string",
|
|
1474
|
+
options: ["async", "auto", "sync"],
|
|
1475
|
+
description: "Indicates the preferred method to decode the image."
|
|
1476
|
+
},
|
|
1477
|
+
defaultChecked: { required: false, control: "boolean", type: "boolean" },
|
|
1478
|
+
dir: {
|
|
1479
|
+
required: false,
|
|
1480
|
+
control: "text",
|
|
1481
|
+
type: "string",
|
|
1482
|
+
description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
|
|
1483
|
+
},
|
|
1484
|
+
draggable: {
|
|
1485
|
+
required: false,
|
|
1486
|
+
control: "boolean",
|
|
1487
|
+
type: "boolean",
|
|
1488
|
+
description: "Defines whether the element can be dragged."
|
|
1489
|
+
},
|
|
1490
|
+
height: {
|
|
1491
|
+
required: false,
|
|
1492
|
+
control: "number",
|
|
1493
|
+
type: "number",
|
|
1494
|
+
description: "Defines the image\u2019s height in pixels."
|
|
1495
|
+
},
|
|
1496
|
+
hidden: {
|
|
1497
|
+
required: false,
|
|
1498
|
+
control: "boolean",
|
|
1499
|
+
type: "boolean",
|
|
1500
|
+
description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
|
|
1501
|
+
},
|
|
1502
|
+
id: {
|
|
1503
|
+
required: false,
|
|
1504
|
+
control: "text",
|
|
1505
|
+
type: "string",
|
|
1506
|
+
description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
|
|
1507
|
+
},
|
|
1508
|
+
inputMode: {
|
|
1509
|
+
description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
|
|
1510
|
+
required: false,
|
|
1511
|
+
control: "select",
|
|
1512
|
+
type: "string",
|
|
1513
|
+
options: [
|
|
1514
|
+
"search",
|
|
1515
|
+
"text",
|
|
1516
|
+
"none",
|
|
1517
|
+
"tel",
|
|
1518
|
+
"url",
|
|
1519
|
+
"email",
|
|
1520
|
+
"numeric",
|
|
1521
|
+
"decimal"
|
|
1522
|
+
]
|
|
1523
|
+
},
|
|
1524
|
+
is: {
|
|
1525
|
+
description: "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
|
|
1526
|
+
required: false,
|
|
1527
|
+
control: "text",
|
|
1528
|
+
type: "string"
|
|
1529
|
+
},
|
|
1530
|
+
itemID: { required: false, control: "text", type: "string" },
|
|
1531
|
+
itemProp: { required: false, control: "text", type: "string" },
|
|
1532
|
+
itemRef: { required: false, control: "text", type: "string" },
|
|
1533
|
+
itemScope: { required: false, control: "boolean", type: "boolean" },
|
|
1534
|
+
itemType: { required: false, control: "text", type: "string" },
|
|
1535
|
+
lang: {
|
|
1536
|
+
required: false,
|
|
1537
|
+
control: "text",
|
|
1538
|
+
type: "string",
|
|
1539
|
+
description: "Defines the language used in the element."
|
|
1540
|
+
},
|
|
1541
|
+
loading: {
|
|
1542
|
+
required: false,
|
|
1543
|
+
control: "radio",
|
|
1544
|
+
type: "string",
|
|
1545
|
+
defaultValue: "lazy",
|
|
1546
|
+
options: ["eager", "lazy"],
|
|
1547
|
+
description: "Determines whether the image will load as soon as possible (Eager), or when it scrolls into view (Lazy). Lazy loading is a great option for pages with many images because it can significantly reduce the time it takes for the page to load initially."
|
|
1548
|
+
},
|
|
1549
|
+
nonce: { required: false, control: "text", type: "string" },
|
|
1550
|
+
optimize: { required: false, control: "boolean", type: "boolean" },
|
|
1551
|
+
placeholder: {
|
|
1552
|
+
required: false,
|
|
1553
|
+
control: "text",
|
|
1554
|
+
type: "string",
|
|
1555
|
+
description: "Provides a hint to the user of what can be entered in the field."
|
|
1556
|
+
},
|
|
1557
|
+
prefix: { required: false, control: "text", type: "string" },
|
|
1558
|
+
property: { required: false, control: "text", type: "string" },
|
|
1559
|
+
quality: { required: false, control: "number", type: "number" },
|
|
1560
|
+
radioGroup: { required: false, control: "text", type: "string" },
|
|
1561
|
+
referrerPolicy: {
|
|
1562
|
+
required: false,
|
|
1563
|
+
control: "select",
|
|
1564
|
+
type: "string",
|
|
1565
|
+
options: [
|
|
1566
|
+
"",
|
|
1567
|
+
"no-referrer",
|
|
1568
|
+
"no-referrer-when-downgrade",
|
|
1569
|
+
"origin",
|
|
1570
|
+
"origin-when-cross-origin",
|
|
1571
|
+
"same-origin",
|
|
1572
|
+
"strict-origin",
|
|
1573
|
+
"strict-origin-when-cross-origin",
|
|
1574
|
+
"unsafe-url"
|
|
1575
|
+
],
|
|
1576
|
+
description: "Specifies which referrer is sent when fetching the resource."
|
|
1577
|
+
},
|
|
1578
|
+
rel: {
|
|
1579
|
+
required: false,
|
|
1580
|
+
control: "text",
|
|
1581
|
+
type: "string",
|
|
1582
|
+
description: "Specifies the relationship of the target object to the link object."
|
|
1583
|
+
},
|
|
1584
|
+
resource: { required: false, control: "text", type: "string" },
|
|
1585
|
+
results: { required: false, control: "number", type: "number" },
|
|
1586
|
+
rev: { required: false, control: "text", type: "string" },
|
|
1587
|
+
role: {
|
|
1588
|
+
required: false,
|
|
1589
|
+
control: "text",
|
|
1590
|
+
type: "string",
|
|
1591
|
+
description: "Defines an explicit role for an element for use by assistive technologies."
|
|
1592
|
+
},
|
|
1593
|
+
security: { required: false, control: "text", type: "string" },
|
|
1594
|
+
sizes: { required: false, control: "text", type: "string" },
|
|
1595
|
+
slot: {
|
|
1596
|
+
required: false,
|
|
1597
|
+
control: "text",
|
|
1598
|
+
type: "string",
|
|
1599
|
+
description: "Assigns a slot in a shadow DOM shadow tree to an element."
|
|
1600
|
+
},
|
|
1601
|
+
spellCheck: {
|
|
1602
|
+
required: false,
|
|
1603
|
+
control: "boolean",
|
|
1604
|
+
type: "boolean",
|
|
1605
|
+
description: "Indicates whether spell checking is allowed for the element."
|
|
1606
|
+
},
|
|
1607
|
+
src: {
|
|
1608
|
+
required: false,
|
|
1609
|
+
control: "text",
|
|
1610
|
+
type: "string",
|
|
1611
|
+
description: "The URL of the embeddable content."
|
|
1612
|
+
},
|
|
1613
|
+
srcSet: {
|
|
1614
|
+
required: false,
|
|
1615
|
+
control: "text",
|
|
1616
|
+
type: "string",
|
|
1617
|
+
description: "One or more responsive image candidates."
|
|
1618
|
+
},
|
|
1619
|
+
suppressContentEditableWarning: {
|
|
1620
|
+
required: false,
|
|
1621
|
+
control: "boolean",
|
|
1622
|
+
type: "boolean"
|
|
1623
|
+
},
|
|
1624
|
+
suppressHydrationWarning: {
|
|
1625
|
+
required: false,
|
|
1626
|
+
control: "boolean",
|
|
1627
|
+
type: "boolean"
|
|
1628
|
+
},
|
|
1629
|
+
tabIndex: {
|
|
1630
|
+
required: false,
|
|
1631
|
+
control: "number",
|
|
1632
|
+
type: "number",
|
|
1633
|
+
description: "Overrides the browser's default tab order and follows the one specified instead."
|
|
1634
|
+
},
|
|
1635
|
+
title: {
|
|
1636
|
+
required: false,
|
|
1637
|
+
control: "text",
|
|
1638
|
+
type: "string",
|
|
1639
|
+
description: "Text to be displayed in a tooltip when hovering over the element."
|
|
1640
|
+
},
|
|
1641
|
+
translate: {
|
|
1642
|
+
required: false,
|
|
1643
|
+
control: "radio",
|
|
1644
|
+
type: "string",
|
|
1645
|
+
options: ["yes", "no"],
|
|
1646
|
+
description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
|
|
1647
|
+
},
|
|
1648
|
+
typeof: { required: false, control: "text", type: "string" },
|
|
1649
|
+
unselectable: {
|
|
1650
|
+
required: false,
|
|
1651
|
+
control: "radio",
|
|
1652
|
+
type: "string",
|
|
1653
|
+
options: ["on", "off"]
|
|
1654
|
+
},
|
|
1655
|
+
useMap: { required: false, control: "text", type: "string" },
|
|
1656
|
+
vocab: { required: false, control: "text", type: "string" },
|
|
1657
|
+
width: {
|
|
1658
|
+
required: false,
|
|
1659
|
+
control: "number",
|
|
1660
|
+
type: "number",
|
|
1661
|
+
description: "Defines the image\u2019s width in pixels."
|
|
1662
|
+
}
|
|
1663
|
+
};
|
|
1664
|
+
|
|
1665
|
+
// src/image.ws.tsx
|
|
1666
|
+
var presetStyle15 = {
|
|
1667
|
+
img: [
|
|
1668
|
+
...img,
|
|
1669
|
+
// Otherwise on new image insert onto canvas it can overfit screen size multiple times
|
|
1670
|
+
{
|
|
1671
|
+
property: "maxWidth",
|
|
1672
|
+
value: { type: "unit", unit: "%", value: 100 }
|
|
1673
|
+
},
|
|
1674
|
+
// inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
|
|
1675
|
+
// see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
|
|
1676
|
+
{
|
|
1677
|
+
property: "display",
|
|
1678
|
+
value: { type: "keyword", value: "block" }
|
|
1679
|
+
}
|
|
1680
|
+
]
|
|
1681
|
+
};
|
|
1682
|
+
var meta19 = {
|
|
1683
|
+
category: "media",
|
|
1684
|
+
type: "embed",
|
|
1685
|
+
label: "Image",
|
|
1686
|
+
description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
|
|
1687
|
+
icon: ImageIcon,
|
|
1688
|
+
states: defaultStates15,
|
|
1689
|
+
presetStyle: presetStyle15,
|
|
1690
|
+
order: 0
|
|
1691
|
+
};
|
|
1692
|
+
var propsOverrides = {
|
|
1693
|
+
src: {
|
|
1694
|
+
type: "string",
|
|
1695
|
+
control: "file",
|
|
1696
|
+
label: "Source",
|
|
1697
|
+
required: false
|
|
1698
|
+
}
|
|
1699
|
+
};
|
|
1700
|
+
var propsMeta3 = {
|
|
1701
|
+
props: {
|
|
1702
|
+
...props3,
|
|
1703
|
+
...propsOverrides
|
|
1704
|
+
},
|
|
1705
|
+
initialProps: ["id", "src", "width", "height", "alt", "loading"]
|
|
1706
|
+
};
|
|
1707
|
+
|
|
1708
|
+
// src/blockquote.ws.tsx
|
|
1709
|
+
import { BlockquoteIcon } from "@webstudio-is/icons/svg";
|
|
1710
|
+
import {
|
|
1711
|
+
defaultStates as defaultStates16
|
|
1712
|
+
} from "@webstudio-is/react-sdk";
|
|
1713
|
+
var presetStyle16 = {
|
|
1714
|
+
blockquote: [
|
|
1715
|
+
{
|
|
1716
|
+
property: "marginTop",
|
|
1717
|
+
value: { type: "unit", value: 0, unit: "number" }
|
|
1718
|
+
},
|
|
1719
|
+
{
|
|
1720
|
+
property: "marginRight",
|
|
1721
|
+
value: { type: "unit", value: 0, unit: "number" }
|
|
1722
|
+
},
|
|
1723
|
+
{
|
|
1724
|
+
property: "marginBottom",
|
|
1725
|
+
value: { type: "unit", value: 10, unit: "px" }
|
|
1726
|
+
},
|
|
1727
|
+
{
|
|
1728
|
+
property: "marginLeft",
|
|
1729
|
+
value: { type: "unit", value: 0, unit: "number" }
|
|
1730
|
+
},
|
|
1731
|
+
{
|
|
1732
|
+
property: "paddingTop",
|
|
1733
|
+
value: { type: "unit", value: 10, unit: "px" }
|
|
1734
|
+
},
|
|
1735
|
+
{
|
|
1736
|
+
property: "paddingBottom",
|
|
1737
|
+
value: { type: "unit", value: 10, unit: "px" }
|
|
1738
|
+
},
|
|
1739
|
+
{
|
|
1740
|
+
property: "paddingLeft",
|
|
1741
|
+
value: { type: "unit", value: 20, unit: "px" }
|
|
1742
|
+
},
|
|
1743
|
+
{
|
|
1744
|
+
property: "paddingRight",
|
|
1745
|
+
value: { type: "unit", value: 20, unit: "px" }
|
|
1746
|
+
},
|
|
1747
|
+
{
|
|
1748
|
+
property: "borderLeftWidth",
|
|
1749
|
+
value: { type: "unit", value: 5, unit: "px" }
|
|
1750
|
+
},
|
|
1751
|
+
{
|
|
1752
|
+
property: "borderLeftStyle",
|
|
1753
|
+
value: { type: "keyword", value: "solid" }
|
|
1754
|
+
},
|
|
1755
|
+
{
|
|
1756
|
+
property: "borderLeftColor",
|
|
1757
|
+
value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
|
|
1758
|
+
}
|
|
1759
|
+
]
|
|
1760
|
+
};
|
|
1761
|
+
var meta20 = {
|
|
1762
|
+
category: "text",
|
|
1763
|
+
type: "container",
|
|
1764
|
+
label: "Blockquote",
|
|
1765
|
+
description: "Use to style a quote from an external source like an article or book.",
|
|
1766
|
+
icon: BlockquoteIcon,
|
|
1767
|
+
states: defaultStates16,
|
|
1768
|
+
presetStyle: presetStyle16,
|
|
1769
|
+
template: [
|
|
1770
|
+
{
|
|
1771
|
+
type: "instance",
|
|
1772
|
+
component: "Blockquote",
|
|
1773
|
+
children: [{ type: "text", value: "Blockquote you can edit" }]
|
|
1774
|
+
}
|
|
1775
|
+
],
|
|
1776
|
+
order: 3
|
|
1777
|
+
};
|
|
1778
|
+
|
|
1779
|
+
// src/list.ws.tsx
|
|
1780
|
+
import { ListIcon } from "@webstudio-is/icons/svg";
|
|
1781
|
+
import {
|
|
1782
|
+
defaultStates as defaultStates17
|
|
1783
|
+
} from "@webstudio-is/react-sdk";
|
|
1784
|
+
import { ol, ul } from "@webstudio-is/react-sdk/css-normalize";
|
|
1785
|
+
var presetStyle17 = {
|
|
1786
|
+
ol: [
|
|
1787
|
+
...ol,
|
|
1788
|
+
{
|
|
1789
|
+
property: "marginTop",
|
|
1790
|
+
value: { type: "keyword", value: "0" }
|
|
1791
|
+
},
|
|
1792
|
+
{
|
|
1793
|
+
property: "marginBottom",
|
|
1794
|
+
value: { type: "keyword", value: "10px" }
|
|
1795
|
+
},
|
|
1796
|
+
{
|
|
1797
|
+
property: "paddingLeft",
|
|
1798
|
+
value: { type: "keyword", value: "40px" }
|
|
1799
|
+
}
|
|
1800
|
+
],
|
|
1801
|
+
ul: [
|
|
1802
|
+
...ul,
|
|
1803
|
+
{
|
|
1804
|
+
property: "marginTop",
|
|
1805
|
+
value: { type: "keyword", value: "0" }
|
|
1806
|
+
},
|
|
1807
|
+
{
|
|
1808
|
+
property: "marginBottom",
|
|
1809
|
+
value: { type: "keyword", value: "10px" }
|
|
1810
|
+
},
|
|
1811
|
+
{
|
|
1812
|
+
property: "paddingLeft",
|
|
1813
|
+
value: { type: "keyword", value: "40px" }
|
|
1814
|
+
}
|
|
1815
|
+
]
|
|
1816
|
+
};
|
|
1817
|
+
var meta21 = {
|
|
1818
|
+
category: "general",
|
|
1819
|
+
type: "container",
|
|
1820
|
+
label: "List",
|
|
1821
|
+
description: "Groups content, like links in a menu or steps in a recipe.",
|
|
1822
|
+
icon: ListIcon,
|
|
1823
|
+
states: defaultStates17,
|
|
1824
|
+
presetStyle: presetStyle17,
|
|
1825
|
+
order: 3
|
|
1826
|
+
};
|
|
1827
|
+
|
|
1828
|
+
// src/list-item.ws.tsx
|
|
1829
|
+
import { ListItemIcon } from "@webstudio-is/icons/svg";
|
|
1830
|
+
import {
|
|
1831
|
+
defaultStates as defaultStates18
|
|
1832
|
+
} from "@webstudio-is/react-sdk";
|
|
1833
|
+
import { li } from "@webstudio-is/react-sdk/css-normalize";
|
|
1834
|
+
var presetStyle18 = {
|
|
1835
|
+
li
|
|
1836
|
+
};
|
|
1837
|
+
var meta22 = {
|
|
1838
|
+
category: "general",
|
|
1839
|
+
type: "container",
|
|
1840
|
+
requiredAncestors: ["List"],
|
|
1841
|
+
label: "List Item",
|
|
1842
|
+
description: "Adds a new item to an existing list.",
|
|
1843
|
+
icon: ListItemIcon,
|
|
1844
|
+
states: defaultStates18,
|
|
1845
|
+
presetStyle: presetStyle18,
|
|
1846
|
+
template: [
|
|
1847
|
+
{
|
|
1848
|
+
type: "instance",
|
|
1849
|
+
component: "ListItem",
|
|
1850
|
+
children: [{ type: "text", value: "List Item you can edit" }]
|
|
1851
|
+
}
|
|
1852
|
+
],
|
|
1853
|
+
order: 4
|
|
1854
|
+
};
|
|
1855
|
+
|
|
1856
|
+
// src/separator.ws.tsx
|
|
1857
|
+
import { DashIcon } from "@webstudio-is/icons/svg";
|
|
1858
|
+
import {
|
|
1859
|
+
defaultStates as defaultStates19
|
|
1860
|
+
} from "@webstudio-is/react-sdk";
|
|
1861
|
+
import { hr } from "@webstudio-is/react-sdk/css-normalize";
|
|
1862
|
+
var presetStyle19 = {
|
|
1863
|
+
hr: [
|
|
1864
|
+
...hr,
|
|
1865
|
+
{
|
|
1866
|
+
property: "height",
|
|
1867
|
+
value: { type: "keyword", value: "1px" }
|
|
1868
|
+
},
|
|
1869
|
+
{
|
|
1870
|
+
property: "backgroundColor",
|
|
1871
|
+
value: { type: "keyword", value: "gray" }
|
|
1872
|
+
},
|
|
1873
|
+
{
|
|
1874
|
+
property: "borderTopStyle",
|
|
1875
|
+
value: { type: "keyword", value: "none" }
|
|
1876
|
+
},
|
|
1877
|
+
{
|
|
1878
|
+
property: "borderRightStyle",
|
|
1879
|
+
value: { type: "keyword", value: "none" }
|
|
1880
|
+
},
|
|
1881
|
+
{
|
|
1882
|
+
property: "borderLeftStyle",
|
|
1883
|
+
value: { type: "keyword", value: "none" }
|
|
1884
|
+
},
|
|
1885
|
+
{
|
|
1886
|
+
property: "borderBottomStyle",
|
|
1887
|
+
value: { type: "keyword", value: "none" }
|
|
1888
|
+
}
|
|
1889
|
+
]
|
|
1890
|
+
};
|
|
1891
|
+
var meta23 = {
|
|
1892
|
+
category: "general",
|
|
1893
|
+
type: "embed",
|
|
1894
|
+
label: "Separator",
|
|
1895
|
+
description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
|
|
1896
|
+
icon: DashIcon,
|
|
1897
|
+
states: defaultStates19,
|
|
1898
|
+
presetStyle: presetStyle19,
|
|
1899
|
+
order: 5
|
|
1900
|
+
};
|
|
1901
|
+
|
|
1902
|
+
// src/code-text.ws.tsx
|
|
1903
|
+
import { CodeTextIcon } from "@webstudio-is/icons/svg";
|
|
1904
|
+
import {
|
|
1905
|
+
defaultStates as defaultStates20
|
|
1906
|
+
} from "@webstudio-is/react-sdk";
|
|
1907
|
+
import { code } from "@webstudio-is/react-sdk/css-normalize";
|
|
1908
|
+
var presetStyle20 = {
|
|
1909
|
+
code: [
|
|
1910
|
+
...code,
|
|
1911
|
+
{
|
|
1912
|
+
property: "display",
|
|
1913
|
+
value: { type: "keyword", value: "block" }
|
|
1914
|
+
},
|
|
1915
|
+
{
|
|
1916
|
+
property: "whiteSpace",
|
|
1917
|
+
value: { type: "keyword", value: "pre-wrap" }
|
|
1918
|
+
},
|
|
1919
|
+
{
|
|
1920
|
+
property: "paddingLeft",
|
|
1921
|
+
value: { type: "unit", value: 0.2, unit: "em" }
|
|
1922
|
+
},
|
|
1923
|
+
{
|
|
1924
|
+
property: "paddingRight",
|
|
1925
|
+
value: { type: "unit", value: 0.2, unit: "em" }
|
|
1926
|
+
},
|
|
1927
|
+
{
|
|
1928
|
+
property: "backgroundColor",
|
|
1929
|
+
value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
|
|
1930
|
+
}
|
|
1931
|
+
]
|
|
1932
|
+
};
|
|
1933
|
+
var meta24 = {
|
|
1934
|
+
category: "general",
|
|
1935
|
+
type: "container",
|
|
1936
|
+
label: "Code Text",
|
|
1937
|
+
description: "Use this component when you want to display code as text on the page.",
|
|
1938
|
+
icon: CodeTextIcon,
|
|
1939
|
+
invalidAncestors: ["CodeText"],
|
|
1940
|
+
states: defaultStates20,
|
|
1941
|
+
presetStyle: presetStyle20,
|
|
1942
|
+
template: [
|
|
1943
|
+
{
|
|
1944
|
+
type: "instance",
|
|
1945
|
+
component: "CodeText",
|
|
1946
|
+
children: [{ type: "text", value: "Code you can edit" }]
|
|
1947
|
+
}
|
|
1948
|
+
],
|
|
1949
|
+
order: 8
|
|
1950
|
+
};
|
|
1951
|
+
|
|
1952
|
+
// src/label.ws.tsx
|
|
1953
|
+
import { LabelIcon } from "@webstudio-is/icons/svg";
|
|
1954
|
+
import {
|
|
1955
|
+
defaultStates as defaultStates21
|
|
1956
|
+
} from "@webstudio-is/react-sdk";
|
|
1957
|
+
import { label } from "@webstudio-is/react-sdk/css-normalize";
|
|
1958
|
+
|
|
1959
|
+
// src/__generated__/label.props.ts
|
|
1960
|
+
var props4 = {
|
|
1961
|
+
about: { required: false, control: "text", type: "string" },
|
|
1962
|
+
accessKey: {
|
|
1963
|
+
required: false,
|
|
1964
|
+
control: "text",
|
|
1965
|
+
type: "string",
|
|
1966
|
+
description: "Keyboard shortcut to activate or add focus to the element."
|
|
1967
|
+
},
|
|
1968
|
+
"aria-activedescendant": {
|
|
1969
|
+
description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
|
|
1970
|
+
required: false,
|
|
1971
|
+
control: "text",
|
|
1972
|
+
type: "string"
|
|
1973
|
+
},
|
|
1974
|
+
"aria-atomic": {
|
|
1975
|
+
description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
|
|
1976
|
+
required: false,
|
|
1977
|
+
control: "boolean",
|
|
1978
|
+
type: "boolean"
|
|
1979
|
+
},
|
|
1980
|
+
"aria-autocomplete": {
|
|
1981
|
+
description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
|
|
1982
|
+
required: false,
|
|
1983
|
+
control: "select",
|
|
1984
|
+
type: "string",
|
|
1985
|
+
options: ["list", "none", "inline", "both"]
|
|
1986
|
+
},
|
|
1987
|
+
"aria-braillelabel": {
|
|
1988
|
+
description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
|
|
1989
|
+
required: false,
|
|
1990
|
+
control: "text",
|
|
1991
|
+
type: "string"
|
|
1992
|
+
},
|
|
1993
|
+
"aria-brailleroledescription": {
|
|
1994
|
+
description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
|
|
1995
|
+
required: false,
|
|
1996
|
+
control: "text",
|
|
1997
|
+
type: "string"
|
|
1998
|
+
},
|
|
1999
|
+
"aria-busy": { required: false, control: "boolean", type: "boolean" },
|
|
2000
|
+
"aria-checked": {
|
|
2001
|
+
description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
|
|
2002
|
+
required: false,
|
|
2003
|
+
control: "text",
|
|
2004
|
+
type: "string"
|
|
2005
|
+
},
|
|
2006
|
+
"aria-colcount": {
|
|
2007
|
+
description: "Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.",
|
|
2008
|
+
required: false,
|
|
2009
|
+
control: "number",
|
|
2010
|
+
type: "number"
|
|
2011
|
+
},
|
|
2012
|
+
"aria-colindex": {
|
|
2013
|
+
description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.",
|
|
2014
|
+
required: false,
|
|
2015
|
+
control: "number",
|
|
2016
|
+
type: "number"
|
|
2017
|
+
},
|
|
2018
|
+
"aria-colindextext": {
|
|
2019
|
+
description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
|
|
2020
|
+
required: false,
|
|
2021
|
+
control: "text",
|
|
2022
|
+
type: "string"
|
|
2023
|
+
},
|
|
2024
|
+
"aria-colspan": {
|
|
2025
|
+
description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
|
|
2026
|
+
required: false,
|
|
2027
|
+
control: "number",
|
|
2028
|
+
type: "number"
|
|
2029
|
+
},
|
|
2030
|
+
"aria-controls": {
|
|
2031
|
+
description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.",
|
|
2032
|
+
required: false,
|
|
2033
|
+
control: "text",
|
|
2034
|
+
type: "string"
|
|
2035
|
+
},
|
|
2036
|
+
"aria-current": {
|
|
2037
|
+
description: "Indicates the element that represents the current item within a container or set of related elements.",
|
|
2038
|
+
required: false,
|
|
2039
|
+
control: "text",
|
|
2040
|
+
type: "string"
|
|
2041
|
+
},
|
|
2042
|
+
"aria-describedby": {
|
|
2043
|
+
description: "Identifies the element (or elements) that describes the object.\n@see aria-labelledby",
|
|
2044
|
+
required: false,
|
|
2045
|
+
control: "text",
|
|
2046
|
+
type: "string"
|
|
2047
|
+
},
|
|
2048
|
+
"aria-description": {
|
|
2049
|
+
description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
|
|
2050
|
+
required: false,
|
|
2051
|
+
control: "text",
|
|
2052
|
+
type: "string"
|
|
2053
|
+
},
|
|
2054
|
+
"aria-details": {
|
|
2055
|
+
description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
|
|
2056
|
+
required: false,
|
|
2057
|
+
control: "text",
|
|
2058
|
+
type: "string"
|
|
2059
|
+
},
|
|
2060
|
+
"aria-disabled": {
|
|
2061
|
+
description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.",
|
|
2062
|
+
required: false,
|
|
2063
|
+
control: "boolean",
|
|
2064
|
+
type: "boolean"
|
|
2065
|
+
},
|
|
2066
|
+
"aria-dropeffect": {
|
|
2067
|
+
description: "Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1",
|
|
2068
|
+
required: false,
|
|
2069
|
+
control: "select",
|
|
2070
|
+
type: "string",
|
|
2071
|
+
options: ["link", "none", "copy", "execute", "move", "popup"]
|
|
2072
|
+
},
|
|
2073
|
+
"aria-errormessage": {
|
|
2074
|
+
description: "Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.",
|
|
2075
|
+
required: false,
|
|
2076
|
+
control: "text",
|
|
2077
|
+
type: "string"
|
|
2078
|
+
},
|
|
2079
|
+
"aria-expanded": {
|
|
2080
|
+
description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
|
|
2081
|
+
required: false,
|
|
2082
|
+
control: "boolean",
|
|
2083
|
+
type: "boolean"
|
|
2084
|
+
},
|
|
2085
|
+
"aria-flowto": {
|
|
2086
|
+
description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
|
|
2087
|
+
required: false,
|
|
2088
|
+
control: "text",
|
|
2089
|
+
type: "string"
|
|
2090
|
+
},
|
|
2091
|
+
"aria-grabbed": {
|
|
2092
|
+
description: `Indicates an element's "grabbed" state in a drag-and-drop operation.
|
|
2093
|
+
@deprecated in ARIA 1.1`,
|
|
2094
|
+
required: false,
|
|
2095
|
+
control: "boolean",
|
|
2096
|
+
type: "boolean"
|
|
2097
|
+
},
|
|
2098
|
+
"aria-haspopup": {
|
|
2099
|
+
description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
|
|
2100
|
+
required: false,
|
|
2101
|
+
control: "text",
|
|
2102
|
+
type: "string"
|
|
2103
|
+
},
|
|
2104
|
+
"aria-hidden": {
|
|
2105
|
+
description: "Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.",
|
|
2106
|
+
required: false,
|
|
2107
|
+
control: "boolean",
|
|
2108
|
+
type: "boolean"
|
|
2109
|
+
},
|
|
2110
|
+
"aria-invalid": {
|
|
2111
|
+
description: "Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.",
|
|
2112
|
+
required: false,
|
|
2113
|
+
control: "text",
|
|
2114
|
+
type: "string"
|
|
2115
|
+
},
|
|
2116
|
+
"aria-keyshortcuts": {
|
|
2117
|
+
description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
|
|
2118
|
+
required: false,
|
|
2119
|
+
control: "text",
|
|
2120
|
+
type: "string"
|
|
2121
|
+
},
|
|
2122
|
+
"aria-label": {
|
|
2123
|
+
description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
|
|
2124
|
+
required: false,
|
|
2125
|
+
control: "text",
|
|
2126
|
+
type: "string"
|
|
2127
|
+
},
|
|
2128
|
+
"aria-labelledby": {
|
|
2129
|
+
description: "Identifies the element (or elements) that labels the current element.\n@see aria-describedby.",
|
|
2130
|
+
required: false,
|
|
2131
|
+
control: "text",
|
|
2132
|
+
type: "string"
|
|
2133
|
+
},
|
|
2134
|
+
"aria-level": {
|
|
2135
|
+
description: "Defines the hierarchical level of an element within a structure.",
|
|
2136
|
+
required: false,
|
|
2137
|
+
control: "number",
|
|
2138
|
+
type: "number"
|
|
2139
|
+
},
|
|
2140
|
+
"aria-live": {
|
|
2141
|
+
description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
|
|
2142
|
+
required: false,
|
|
2143
|
+
control: "radio",
|
|
2144
|
+
type: "string",
|
|
2145
|
+
options: ["off", "assertive", "polite"]
|
|
2146
|
+
},
|
|
2147
|
+
"aria-modal": {
|
|
2148
|
+
description: "Indicates whether an element is modal when displayed.",
|
|
2149
|
+
required: false,
|
|
2150
|
+
control: "boolean",
|
|
2151
|
+
type: "boolean"
|
|
2152
|
+
},
|
|
2153
|
+
"aria-multiline": {
|
|
2154
|
+
description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
|
|
2155
|
+
required: false,
|
|
2156
|
+
control: "boolean",
|
|
2157
|
+
type: "boolean"
|
|
2158
|
+
},
|
|
2159
|
+
"aria-multiselectable": {
|
|
2160
|
+
description: "Indicates that the user may select more than one item from the current selectable descendants.",
|
|
2161
|
+
required: false,
|
|
2162
|
+
control: "boolean",
|
|
2163
|
+
type: "boolean"
|
|
2164
|
+
},
|
|
2165
|
+
"aria-orientation": {
|
|
2166
|
+
description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
|
|
2167
|
+
required: false,
|
|
2168
|
+
control: "radio",
|
|
2169
|
+
type: "string",
|
|
2170
|
+
options: ["horizontal", "vertical"]
|
|
2171
|
+
},
|
|
2172
|
+
"aria-owns": {
|
|
2173
|
+
description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.",
|
|
2174
|
+
required: false,
|
|
2175
|
+
control: "text",
|
|
2176
|
+
type: "string"
|
|
2177
|
+
},
|
|
2178
|
+
"aria-placeholder": {
|
|
2179
|
+
description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
|
|
2180
|
+
required: false,
|
|
2181
|
+
control: "text",
|
|
2182
|
+
type: "string"
|
|
2183
|
+
},
|
|
2184
|
+
"aria-posinset": {
|
|
2185
|
+
description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.",
|
|
2186
|
+
required: false,
|
|
2187
|
+
control: "number",
|
|
2188
|
+
type: "number"
|
|
2189
|
+
},
|
|
2190
|
+
"aria-pressed": {
|
|
2191
|
+
description: 'Indicates the current "pressed" state of toggle buttons.\n@see aria-checked\n@see aria-selected.',
|
|
2192
|
+
required: false,
|
|
2193
|
+
control: "text",
|
|
2194
|
+
type: "string"
|
|
2195
|
+
},
|
|
2196
|
+
"aria-readonly": {
|
|
2197
|
+
description: "Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.",
|
|
2198
|
+
required: false,
|
|
2199
|
+
control: "boolean",
|
|
2200
|
+
type: "boolean"
|
|
2201
|
+
},
|
|
2202
|
+
"aria-relevant": {
|
|
2203
|
+
description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.",
|
|
2204
|
+
required: false,
|
|
2205
|
+
control: "select",
|
|
2206
|
+
type: "string",
|
|
2207
|
+
options: [
|
|
2208
|
+
"text",
|
|
2209
|
+
"additions",
|
|
2210
|
+
"additions removals",
|
|
2211
|
+
"additions text",
|
|
2212
|
+
"all",
|
|
2213
|
+
"removals",
|
|
2214
|
+
"removals additions",
|
|
2215
|
+
"removals text",
|
|
2216
|
+
"text additions",
|
|
2217
|
+
"text removals"
|
|
2218
|
+
]
|
|
2219
|
+
},
|
|
2220
|
+
"aria-required": {
|
|
2221
|
+
description: "Indicates that user input is required on the element before a form may be submitted.",
|
|
2222
|
+
required: false,
|
|
2223
|
+
control: "boolean",
|
|
2224
|
+
type: "boolean"
|
|
2225
|
+
},
|
|
2226
|
+
"aria-roledescription": {
|
|
2227
|
+
description: "Defines a human-readable, author-localized description for the role of an element.",
|
|
2228
|
+
required: false,
|
|
2229
|
+
control: "text",
|
|
2230
|
+
type: "string"
|
|
2231
|
+
},
|
|
2232
|
+
"aria-rowcount": {
|
|
2233
|
+
description: "Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.",
|
|
2234
|
+
required: false,
|
|
2235
|
+
control: "number",
|
|
2236
|
+
type: "number"
|
|
2237
|
+
},
|
|
2238
|
+
"aria-rowindex": {
|
|
2239
|
+
description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.",
|
|
2240
|
+
required: false,
|
|
2241
|
+
control: "number",
|
|
2242
|
+
type: "number"
|
|
2243
|
+
},
|
|
2244
|
+
"aria-rowindextext": {
|
|
2245
|
+
description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
|
|
2246
|
+
required: false,
|
|
2247
|
+
control: "text",
|
|
2248
|
+
type: "string"
|
|
2249
|
+
},
|
|
2250
|
+
"aria-rowspan": {
|
|
2251
|
+
description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
|
|
2252
|
+
required: false,
|
|
2253
|
+
control: "number",
|
|
2254
|
+
type: "number"
|
|
2255
|
+
},
|
|
2256
|
+
"aria-selected": {
|
|
2257
|
+
description: 'Indicates the current "selected" state of various widgets.\n@see aria-checked\n@see aria-pressed.',
|
|
2258
|
+
required: false,
|
|
2259
|
+
control: "boolean",
|
|
2260
|
+
type: "boolean"
|
|
2261
|
+
},
|
|
2262
|
+
"aria-setsize": {
|
|
2263
|
+
description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.",
|
|
2264
|
+
required: false,
|
|
2265
|
+
control: "number",
|
|
2266
|
+
type: "number"
|
|
2267
|
+
},
|
|
2268
|
+
"aria-sort": {
|
|
2269
|
+
description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
|
|
2270
|
+
required: false,
|
|
2271
|
+
control: "select",
|
|
2272
|
+
type: "string",
|
|
2273
|
+
options: ["none", "ascending", "descending", "other"]
|
|
2274
|
+
},
|
|
2275
|
+
"aria-valuemax": {
|
|
2276
|
+
description: "Defines the maximum allowed value for a range widget.",
|
|
2277
|
+
required: false,
|
|
2278
|
+
control: "number",
|
|
2279
|
+
type: "number"
|
|
2280
|
+
},
|
|
2281
|
+
"aria-valuemin": {
|
|
2282
|
+
description: "Defines the minimum allowed value for a range widget.",
|
|
2283
|
+
required: false,
|
|
2284
|
+
control: "number",
|
|
2285
|
+
type: "number"
|
|
2286
|
+
},
|
|
2287
|
+
"aria-valuenow": {
|
|
2288
|
+
description: "Defines the current value for a range widget.\n@see aria-valuetext.",
|
|
2289
|
+
required: false,
|
|
2290
|
+
control: "number",
|
|
2291
|
+
type: "number"
|
|
2292
|
+
},
|
|
2293
|
+
"aria-valuetext": {
|
|
2294
|
+
description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
|
|
2295
|
+
required: false,
|
|
2296
|
+
control: "text",
|
|
2297
|
+
type: "string"
|
|
2298
|
+
},
|
|
2299
|
+
autoCapitalize: {
|
|
2300
|
+
required: false,
|
|
2301
|
+
control: "text",
|
|
2302
|
+
type: "string",
|
|
2303
|
+
description: "Sets whether input is automatically capitalized when entered by user."
|
|
2304
|
+
},
|
|
2305
|
+
autoCorrect: { required: false, control: "text", type: "string" },
|
|
2306
|
+
autoFocus: {
|
|
2307
|
+
required: false,
|
|
2308
|
+
control: "boolean",
|
|
2309
|
+
type: "boolean",
|
|
2310
|
+
description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
|
|
2311
|
+
},
|
|
2312
|
+
autoSave: { required: false, control: "text", type: "string" },
|
|
2313
|
+
className: { required: false, control: "text", type: "string" },
|
|
2314
|
+
color: {
|
|
2315
|
+
required: false,
|
|
2316
|
+
control: "color",
|
|
2317
|
+
type: "string",
|
|
2318
|
+
description: "This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
|
|
2319
|
+
},
|
|
2320
|
+
content: {
|
|
2321
|
+
required: false,
|
|
2322
|
+
control: "text",
|
|
2323
|
+
type: "string",
|
|
2324
|
+
description: "A value associated with http-equiv orname depending on the context."
|
|
2325
|
+
},
|
|
2326
|
+
contextMenu: {
|
|
2327
|
+
required: false,
|
|
2328
|
+
control: "text",
|
|
2329
|
+
type: "string",
|
|
2330
|
+
description: "Defines the ID of a menu element which willserve as the element's context menu."
|
|
2331
|
+
},
|
|
2332
|
+
datatype: { required: false, control: "text", type: "string" },
|
|
2333
|
+
defaultChecked: { required: false, control: "boolean", type: "boolean" },
|
|
2334
|
+
dir: {
|
|
2335
|
+
required: false,
|
|
2336
|
+
control: "text",
|
|
2337
|
+
type: "string",
|
|
2338
|
+
description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
|
|
2339
|
+
},
|
|
2340
|
+
draggable: {
|
|
2341
|
+
required: false,
|
|
2342
|
+
control: "boolean",
|
|
2343
|
+
type: "boolean",
|
|
2344
|
+
description: "Defines whether the element can be dragged."
|
|
2345
|
+
},
|
|
2346
|
+
form: {
|
|
2347
|
+
required: false,
|
|
2348
|
+
control: "text",
|
|
2349
|
+
type: "string",
|
|
2350
|
+
description: "Indicates the form that is the owner of the element."
|
|
2351
|
+
},
|
|
2352
|
+
hidden: {
|
|
2353
|
+
required: false,
|
|
2354
|
+
control: "boolean",
|
|
2355
|
+
type: "boolean",
|
|
2356
|
+
description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
|
|
2357
|
+
},
|
|
2358
|
+
htmlFor: {
|
|
2359
|
+
required: false,
|
|
2360
|
+
control: "text",
|
|
2361
|
+
type: "string",
|
|
2362
|
+
description: "Associates this Label with an Input. The value of the \u201CFor\u201D attribute should match the ID attribute of the corresponding Input element"
|
|
2363
|
+
},
|
|
2364
|
+
id: {
|
|
2365
|
+
required: false,
|
|
2366
|
+
control: "text",
|
|
2367
|
+
type: "string",
|
|
2368
|
+
description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
|
|
2369
|
+
},
|
|
2370
|
+
inputMode: {
|
|
2371
|
+
description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
|
|
2372
|
+
required: false,
|
|
2373
|
+
control: "select",
|
|
2374
|
+
type: "string",
|
|
2375
|
+
options: [
|
|
2376
|
+
"search",
|
|
2377
|
+
"text",
|
|
2378
|
+
"none",
|
|
2379
|
+
"tel",
|
|
2380
|
+
"url",
|
|
2381
|
+
"email",
|
|
2382
|
+
"numeric",
|
|
2383
|
+
"decimal"
|
|
2384
|
+
]
|
|
2385
|
+
},
|
|
2386
|
+
is: {
|
|
2387
|
+
description: "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
|
|
2388
|
+
required: false,
|
|
2389
|
+
control: "text",
|
|
2390
|
+
type: "string"
|
|
2391
|
+
},
|
|
2392
|
+
itemID: { required: false, control: "text", type: "string" },
|
|
2393
|
+
itemProp: { required: false, control: "text", type: "string" },
|
|
2394
|
+
itemRef: { required: false, control: "text", type: "string" },
|
|
2395
|
+
itemScope: { required: false, control: "boolean", type: "boolean" },
|
|
2396
|
+
itemType: { required: false, control: "text", type: "string" },
|
|
2397
|
+
lang: {
|
|
2398
|
+
required: false,
|
|
2399
|
+
control: "text",
|
|
2400
|
+
type: "string",
|
|
2401
|
+
description: "Defines the language used in the element."
|
|
2402
|
+
},
|
|
2403
|
+
nonce: { required: false, control: "text", type: "string" },
|
|
2404
|
+
placeholder: {
|
|
2405
|
+
required: false,
|
|
2406
|
+
control: "text",
|
|
2407
|
+
type: "string",
|
|
2408
|
+
description: "Provides a hint to the user of what can be entered in the field."
|
|
2409
|
+
},
|
|
2410
|
+
prefix: { required: false, control: "text", type: "string" },
|
|
2411
|
+
property: { required: false, control: "text", type: "string" },
|
|
2412
|
+
radioGroup: { required: false, control: "text", type: "string" },
|
|
2413
|
+
rel: {
|
|
2414
|
+
required: false,
|
|
2415
|
+
control: "text",
|
|
2416
|
+
type: "string",
|
|
2417
|
+
description: "Specifies the relationship of the target object to the link object."
|
|
2418
|
+
},
|
|
2419
|
+
resource: { required: false, control: "text", type: "string" },
|
|
2420
|
+
results: { required: false, control: "number", type: "number" },
|
|
2421
|
+
rev: { required: false, control: "text", type: "string" },
|
|
2422
|
+
role: {
|
|
2423
|
+
required: false,
|
|
2424
|
+
control: "text",
|
|
2425
|
+
type: "string",
|
|
2426
|
+
description: "Defines an explicit role for an element for use by assistive technologies."
|
|
2427
|
+
},
|
|
2428
|
+
security: { required: false, control: "text", type: "string" },
|
|
2429
|
+
slot: {
|
|
2430
|
+
required: false,
|
|
2431
|
+
control: "text",
|
|
2432
|
+
type: "string",
|
|
2433
|
+
description: "Assigns a slot in a shadow DOM shadow tree to an element."
|
|
2434
|
+
},
|
|
2435
|
+
spellCheck: {
|
|
2436
|
+
required: false,
|
|
2437
|
+
control: "boolean",
|
|
2438
|
+
type: "boolean",
|
|
2439
|
+
description: "Indicates whether spell checking is allowed for the element."
|
|
2440
|
+
},
|
|
2441
|
+
suppressContentEditableWarning: {
|
|
2442
|
+
required: false,
|
|
2443
|
+
control: "boolean",
|
|
2444
|
+
type: "boolean"
|
|
2445
|
+
},
|
|
2446
|
+
suppressHydrationWarning: {
|
|
2447
|
+
required: false,
|
|
2448
|
+
control: "boolean",
|
|
2449
|
+
type: "boolean"
|
|
2450
|
+
},
|
|
2451
|
+
tabIndex: {
|
|
2452
|
+
required: false,
|
|
2453
|
+
control: "number",
|
|
2454
|
+
type: "number",
|
|
2455
|
+
description: "Overrides the browser's default tab order and follows the one specified instead."
|
|
2456
|
+
},
|
|
2457
|
+
title: {
|
|
2458
|
+
required: false,
|
|
2459
|
+
control: "text",
|
|
2460
|
+
type: "string",
|
|
2461
|
+
description: "Text to be displayed in a tooltip when hovering over the element."
|
|
2462
|
+
},
|
|
2463
|
+
translate: {
|
|
2464
|
+
required: false,
|
|
2465
|
+
control: "radio",
|
|
2466
|
+
type: "string",
|
|
2467
|
+
options: ["yes", "no"],
|
|
2468
|
+
description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
|
|
2469
|
+
},
|
|
2470
|
+
typeof: { required: false, control: "text", type: "string" },
|
|
2471
|
+
unselectable: {
|
|
2472
|
+
required: false,
|
|
2473
|
+
control: "radio",
|
|
2474
|
+
type: "string",
|
|
2475
|
+
options: ["on", "off"]
|
|
2476
|
+
},
|
|
2477
|
+
vocab: { required: false, control: "text", type: "string" }
|
|
2478
|
+
};
|
|
2479
|
+
|
|
2480
|
+
// src/label.ws.tsx
|
|
2481
|
+
var presetStyle21 = {
|
|
2482
|
+
label: [
|
|
2483
|
+
...label,
|
|
2484
|
+
{ property: "display", value: { type: "keyword", value: "block" } }
|
|
2485
|
+
]
|
|
2486
|
+
};
|
|
2487
|
+
var meta25 = {
|
|
2488
|
+
category: "forms",
|
|
2489
|
+
invalidAncestors: ["Button", "Label"],
|
|
2490
|
+
type: "container",
|
|
2491
|
+
label: "Input Label",
|
|
2492
|
+
icon: LabelIcon,
|
|
2493
|
+
states: defaultStates21,
|
|
2494
|
+
presetStyle: presetStyle21,
|
|
2495
|
+
order: 2,
|
|
2496
|
+
template: [
|
|
2497
|
+
{
|
|
2498
|
+
type: "instance",
|
|
2499
|
+
component: "Label",
|
|
2500
|
+
children: [{ type: "text", value: "Form Label" }]
|
|
2501
|
+
}
|
|
2502
|
+
]
|
|
2503
|
+
};
|
|
2504
|
+
var propsMeta4 = {
|
|
2505
|
+
props: {
|
|
2506
|
+
...props4,
|
|
2507
|
+
htmlFor: {
|
|
2508
|
+
...props4.htmlFor,
|
|
2509
|
+
label: "For"
|
|
2510
|
+
}
|
|
2511
|
+
},
|
|
2512
|
+
initialProps: ["id", "htmlFor"]
|
|
2513
|
+
};
|
|
2514
|
+
|
|
2515
|
+
// src/textarea.ws.tsx
|
|
2516
|
+
import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
|
|
2517
|
+
import {
|
|
2518
|
+
defaultStates as defaultStates22
|
|
2519
|
+
} from "@webstudio-is/react-sdk";
|
|
2520
|
+
import { textarea } from "@webstudio-is/react-sdk/css-normalize";
|
|
2521
|
+
var presetStyle22 = {
|
|
2522
|
+
textarea: [
|
|
2523
|
+
...textarea,
|
|
2524
|
+
// resize doesn't work well while on canvas
|
|
2525
|
+
{ property: "resize", value: { type: "keyword", value: "none" } },
|
|
2526
|
+
{
|
|
2527
|
+
property: "display",
|
|
2528
|
+
value: { type: "keyword", value: "block" }
|
|
2529
|
+
}
|
|
2530
|
+
]
|
|
2531
|
+
};
|
|
2532
|
+
var meta26 = {
|
|
2533
|
+
category: "forms",
|
|
2534
|
+
type: "control",
|
|
2535
|
+
label: "Text Area",
|
|
2536
|
+
description: "A multi-line text input for collecting longer string data from your users.",
|
|
2537
|
+
icon: FormTextAreaIcon,
|
|
2538
|
+
presetStyle: presetStyle22,
|
|
2539
|
+
order: 4,
|
|
2540
|
+
states: [
|
|
2541
|
+
...defaultStates22,
|
|
2542
|
+
{ selector: "::placeholder", label: "Placeholder" },
|
|
2543
|
+
{ selector: ":valid", label: "Valid" },
|
|
2544
|
+
{ selector: ":invalid", label: "Invalid" },
|
|
2545
|
+
{ selector: ":required", label: "Required" },
|
|
2546
|
+
{ selector: ":optional", label: "Optional" }
|
|
2547
|
+
// Additional states will go into submenu
|
|
2548
|
+
//{ selector: ":disabled", label: "Disabled" },
|
|
2549
|
+
//{ selector: ":enabled", label: "Enabled" },
|
|
2550
|
+
//{ selector: ":read-only", label: "Read Only" },
|
|
2551
|
+
//{ selector: ":read-write", label: "Read Write" },
|
|
2552
|
+
]
|
|
2553
|
+
};
|
|
2554
|
+
|
|
2555
|
+
// src/radio-button.ws.tsx
|
|
2556
|
+
import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
|
|
2557
|
+
import {
|
|
2558
|
+
defaultStates as defaultStates23
|
|
2559
|
+
} from "@webstudio-is/react-sdk";
|
|
2560
|
+
import { input as input2 } from "@webstudio-is/react-sdk/css-normalize";
|
|
2561
|
+
var presetStyle23 = {
|
|
2562
|
+
input: [
|
|
2563
|
+
...input2,
|
|
2564
|
+
{
|
|
2565
|
+
property: "marginRight",
|
|
2566
|
+
value: { type: "unit", unit: "em", value: 0.5 }
|
|
2567
|
+
}
|
|
2568
|
+
]
|
|
2569
|
+
};
|
|
2570
|
+
var meta27 = {
|
|
2571
|
+
category: "forms",
|
|
2572
|
+
invalidAncestors: ["Button"],
|
|
2573
|
+
type: "control",
|
|
2574
|
+
label: "Radio",
|
|
2575
|
+
description: "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their \u201CName\u201D properties.",
|
|
2576
|
+
icon: RadioCheckedIcon,
|
|
2577
|
+
presetStyle: presetStyle23,
|
|
2578
|
+
order: 5,
|
|
2579
|
+
states: [
|
|
2580
|
+
...defaultStates23,
|
|
2581
|
+
{ selector: ":checked", label: "Checked" },
|
|
2582
|
+
{ selector: ":required", label: "Required" },
|
|
2583
|
+
{ selector: ":optional", label: "Optional" }
|
|
2584
|
+
// Additional states will go into submenu
|
|
2585
|
+
//{ selector: ":disabled", label: "Disabled" },
|
|
2586
|
+
//{ selector: ":enabled", label: "Enabled" },
|
|
2587
|
+
//{ selector: ":read-only", label: "Read Only" },
|
|
2588
|
+
//{ selector: ":read-write", label: "Read Write" },
|
|
2589
|
+
],
|
|
2590
|
+
template: [
|
|
2591
|
+
{
|
|
2592
|
+
type: "instance",
|
|
2593
|
+
component: "Label",
|
|
2594
|
+
label: "Radio Field",
|
|
2595
|
+
children: [
|
|
2596
|
+
{ type: "instance", component: "RadioButton", props: [], children: [] },
|
|
2597
|
+
{
|
|
2598
|
+
type: "instance",
|
|
2599
|
+
component: "Text",
|
|
2600
|
+
label: "Radio Label",
|
|
2601
|
+
props: [{ type: "string", name: "tag", value: "span" }],
|
|
2602
|
+
children: [{ type: "text", value: "Radio" }]
|
|
2603
|
+
}
|
|
2604
|
+
]
|
|
2605
|
+
}
|
|
2606
|
+
]
|
|
2607
|
+
};
|
|
2608
|
+
|
|
2609
|
+
// src/checkbox.ws.tsx
|
|
2610
|
+
import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
|
|
2611
|
+
import {
|
|
2612
|
+
defaultStates as defaultStates24
|
|
2613
|
+
} from "@webstudio-is/react-sdk";
|
|
2614
|
+
import { input as input3 } from "@webstudio-is/react-sdk/css-normalize";
|
|
2615
|
+
var presetStyle24 = {
|
|
2616
|
+
input: [
|
|
2617
|
+
...input3,
|
|
2618
|
+
{
|
|
2619
|
+
property: "marginRight",
|
|
2620
|
+
value: { type: "unit", unit: "em", value: 0.5 }
|
|
2621
|
+
}
|
|
2622
|
+
]
|
|
2623
|
+
};
|
|
2624
|
+
var meta28 = {
|
|
2625
|
+
category: "forms",
|
|
2626
|
+
invalidAncestors: ["Button"],
|
|
2627
|
+
type: "control",
|
|
2628
|
+
label: "Checkbox",
|
|
2629
|
+
description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their \u201CName\u201D properties. Unlike radios, any number of checkboxes in a group can be checked.",
|
|
2630
|
+
icon: CheckboxCheckedIcon,
|
|
2631
|
+
presetStyle: presetStyle24,
|
|
2632
|
+
order: 6,
|
|
2633
|
+
states: [
|
|
2634
|
+
...defaultStates24,
|
|
2635
|
+
{ selector: ":checked", label: "Checked" },
|
|
2636
|
+
{ selector: ":required", label: "Required" },
|
|
2637
|
+
{ selector: ":optional", label: "Optional" },
|
|
2638
|
+
{ selector: ":disabled", label: "Disabled" },
|
|
2639
|
+
{ selector: ":enabled", label: "Enabled" },
|
|
2640
|
+
{ selector: ":read-only", label: "Read Only" },
|
|
2641
|
+
{ selector: ":read-write", label: "Read Write" }
|
|
2642
|
+
],
|
|
2643
|
+
template: [
|
|
2644
|
+
{
|
|
2645
|
+
type: "instance",
|
|
2646
|
+
component: "Label",
|
|
2647
|
+
label: "Checkbox Field",
|
|
2648
|
+
children: [
|
|
2649
|
+
{ type: "instance", component: "Checkbox", children: [] },
|
|
2650
|
+
{
|
|
2651
|
+
type: "instance",
|
|
2652
|
+
component: "Text",
|
|
2653
|
+
label: "Checkbox Label",
|
|
2654
|
+
props: [{ type: "string", name: "tag", value: "span" }],
|
|
2655
|
+
children: [{ type: "text", value: "Checkbox" }]
|
|
2656
|
+
}
|
|
2657
|
+
]
|
|
2658
|
+
}
|
|
2659
|
+
]
|
|
2660
|
+
};
|
|
2661
|
+
|
|
2662
|
+
// src/vimeo.ws.ts
|
|
2663
|
+
import { PlayIcon, SpinnerIcon, VimeoIcon } from "@webstudio-is/icons/svg";
|
|
2664
|
+
import {
|
|
2665
|
+
defaultStates as defaultStates25
|
|
2666
|
+
} from "@webstudio-is/react-sdk";
|
|
2667
|
+
import { div as div3 } from "@webstudio-is/react-sdk/css-normalize";
|
|
2668
|
+
var presetStyle25 = {
|
|
2669
|
+
div: div3
|
|
2670
|
+
};
|
|
2671
|
+
var meta29 = {
|
|
2672
|
+
category: "media",
|
|
2673
|
+
type: "container",
|
|
2674
|
+
label: "Vimeo",
|
|
2675
|
+
description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
|
|
2676
|
+
order: 1,
|
|
2677
|
+
icon: VimeoIcon,
|
|
2678
|
+
states: defaultStates25,
|
|
2679
|
+
presetStyle: presetStyle25,
|
|
2680
|
+
template: [
|
|
2681
|
+
{
|
|
2682
|
+
type: "instance",
|
|
2683
|
+
component: "Vimeo",
|
|
2684
|
+
styles: [
|
|
2685
|
+
{
|
|
2686
|
+
property: "position",
|
|
2687
|
+
value: { type: "keyword", value: "relative" }
|
|
2688
|
+
},
|
|
2689
|
+
{
|
|
2690
|
+
property: "aspectRatio",
|
|
2691
|
+
value: { type: "keyword", value: "640/360" }
|
|
2692
|
+
},
|
|
2693
|
+
{
|
|
2694
|
+
property: "width",
|
|
2695
|
+
value: { type: "unit", value: 100, unit: "%" }
|
|
2696
|
+
}
|
|
2697
|
+
],
|
|
2698
|
+
children: [
|
|
2699
|
+
{
|
|
2700
|
+
type: "instance",
|
|
2701
|
+
component: "VimeoPreviewImage",
|
|
2702
|
+
styles: [
|
|
2703
|
+
{
|
|
2704
|
+
property: "position",
|
|
2705
|
+
value: { type: "keyword", value: "absolute" }
|
|
2706
|
+
},
|
|
2707
|
+
{
|
|
2708
|
+
property: "objectFit",
|
|
2709
|
+
value: { type: "keyword", value: "cover" }
|
|
2710
|
+
},
|
|
2711
|
+
{
|
|
2712
|
+
property: "width",
|
|
2713
|
+
value: { type: "unit", value: 100, unit: "%" }
|
|
2714
|
+
},
|
|
2715
|
+
{
|
|
2716
|
+
property: "height",
|
|
2717
|
+
value: { type: "unit", value: 100, unit: "%" }
|
|
2718
|
+
},
|
|
2719
|
+
{
|
|
2720
|
+
property: "borderTopLeftRadius",
|
|
2721
|
+
value: { type: "unit", value: 20, unit: "px" }
|
|
2722
|
+
},
|
|
2723
|
+
{
|
|
2724
|
+
property: "borderTopRightRadius",
|
|
2725
|
+
value: { type: "unit", value: 20, unit: "px" }
|
|
2726
|
+
},
|
|
2727
|
+
{
|
|
2728
|
+
property: "borderBottomLeftRadius",
|
|
2729
|
+
value: { type: "unit", value: 20, unit: "px" }
|
|
2730
|
+
},
|
|
2731
|
+
{
|
|
2732
|
+
property: "borderBottomRightRadius",
|
|
2733
|
+
value: { type: "unit", value: 20, unit: "px" }
|
|
2734
|
+
},
|
|
2735
|
+
{
|
|
2736
|
+
property: "objectPosition",
|
|
2737
|
+
value: { type: "keyword", value: "cover" }
|
|
2738
|
+
}
|
|
2739
|
+
],
|
|
2740
|
+
children: [],
|
|
2741
|
+
props: [
|
|
2742
|
+
{
|
|
2743
|
+
type: "string",
|
|
2744
|
+
name: "alt",
|
|
2745
|
+
value: "Vimeo video preview image"
|
|
2746
|
+
},
|
|
2747
|
+
{
|
|
2748
|
+
type: "string",
|
|
2749
|
+
name: "sizes",
|
|
2750
|
+
value: "100vw"
|
|
2751
|
+
}
|
|
2752
|
+
]
|
|
2753
|
+
},
|
|
2754
|
+
{
|
|
2755
|
+
type: "instance",
|
|
2756
|
+
component: "Box",
|
|
2757
|
+
label: "Spinner",
|
|
2758
|
+
styles: [
|
|
2759
|
+
{
|
|
2760
|
+
property: "position",
|
|
2761
|
+
value: { type: "keyword", value: "absolute" }
|
|
2762
|
+
},
|
|
2763
|
+
{
|
|
2764
|
+
property: "top",
|
|
2765
|
+
value: { type: "unit", value: 50, unit: "%" }
|
|
2766
|
+
},
|
|
2767
|
+
{
|
|
2768
|
+
property: "left",
|
|
2769
|
+
value: { type: "unit", value: 50, unit: "%" }
|
|
2770
|
+
},
|
|
2771
|
+
{
|
|
2772
|
+
property: "width",
|
|
2773
|
+
value: { type: "unit", value: 70, unit: "px" }
|
|
2774
|
+
},
|
|
2775
|
+
{
|
|
2776
|
+
property: "height",
|
|
2777
|
+
value: { type: "unit", value: 70, unit: "px" }
|
|
2778
|
+
},
|
|
2779
|
+
{
|
|
2780
|
+
property: "marginTop",
|
|
2781
|
+
value: { type: "unit", value: -35, unit: "px" }
|
|
2782
|
+
},
|
|
2783
|
+
{
|
|
2784
|
+
property: "marginLeft",
|
|
2785
|
+
value: { type: "unit", value: -35, unit: "px" }
|
|
2786
|
+
}
|
|
2787
|
+
],
|
|
2788
|
+
children: [
|
|
2789
|
+
{
|
|
2790
|
+
type: "instance",
|
|
2791
|
+
component: "HtmlEmbed",
|
|
2792
|
+
label: "Spinner SVG",
|
|
2793
|
+
props: [
|
|
2794
|
+
{
|
|
2795
|
+
type: "string",
|
|
2796
|
+
name: "code",
|
|
2797
|
+
value: SpinnerIcon
|
|
2798
|
+
}
|
|
2799
|
+
],
|
|
2800
|
+
children: []
|
|
2801
|
+
}
|
|
2802
|
+
]
|
|
2803
|
+
},
|
|
2804
|
+
{
|
|
2805
|
+
type: "instance",
|
|
2806
|
+
component: "VimeoPlayButton",
|
|
2807
|
+
props: [
|
|
2808
|
+
{
|
|
2809
|
+
type: "string",
|
|
2810
|
+
name: "aria-label",
|
|
2811
|
+
value: "Play button"
|
|
2812
|
+
}
|
|
2813
|
+
],
|
|
2814
|
+
styles: [
|
|
2815
|
+
{
|
|
2816
|
+
property: "position",
|
|
2817
|
+
value: { type: "keyword", value: "absolute" }
|
|
2818
|
+
},
|
|
2819
|
+
{
|
|
2820
|
+
property: "width",
|
|
2821
|
+
value: { type: "unit", value: 140, unit: "px" }
|
|
2822
|
+
},
|
|
2823
|
+
{
|
|
2824
|
+
property: "height",
|
|
2825
|
+
value: { type: "unit", value: 80, unit: "px" }
|
|
2826
|
+
},
|
|
2827
|
+
{
|
|
2828
|
+
property: "top",
|
|
2829
|
+
value: { type: "unit", value: 50, unit: "%" }
|
|
2830
|
+
},
|
|
2831
|
+
{
|
|
2832
|
+
property: "left",
|
|
2833
|
+
value: { type: "unit", value: 50, unit: "%" }
|
|
2834
|
+
},
|
|
2835
|
+
{
|
|
2836
|
+
property: "marginTop",
|
|
2837
|
+
value: { type: "unit", value: -40, unit: "px" }
|
|
2838
|
+
},
|
|
2839
|
+
{
|
|
2840
|
+
property: "marginLeft",
|
|
2841
|
+
value: { type: "unit", value: -70, unit: "px" }
|
|
2842
|
+
},
|
|
2843
|
+
{
|
|
2844
|
+
property: "display",
|
|
2845
|
+
value: { type: "keyword", value: "flex" }
|
|
2846
|
+
},
|
|
2847
|
+
{
|
|
2848
|
+
property: "alignItems",
|
|
2849
|
+
value: { type: "keyword", value: "center" }
|
|
2850
|
+
},
|
|
2851
|
+
{
|
|
2852
|
+
property: "justifyContent",
|
|
2853
|
+
value: { type: "keyword", value: "center" }
|
|
2854
|
+
},
|
|
2855
|
+
{
|
|
2856
|
+
property: "borderTopStyle",
|
|
2857
|
+
value: { type: "keyword", value: "none" }
|
|
2858
|
+
},
|
|
2859
|
+
{
|
|
2860
|
+
property: "borderRightStyle",
|
|
2861
|
+
value: { type: "keyword", value: "none" }
|
|
2862
|
+
},
|
|
2863
|
+
{
|
|
2864
|
+
property: "borderBottomStyle",
|
|
2865
|
+
value: { type: "keyword", value: "none" }
|
|
2866
|
+
},
|
|
2867
|
+
{
|
|
2868
|
+
property: "borderLeftStyle",
|
|
2869
|
+
value: { type: "keyword", value: "none" }
|
|
2870
|
+
},
|
|
2871
|
+
{
|
|
2872
|
+
property: "borderTopLeftRadius",
|
|
2873
|
+
value: { type: "unit", value: 5, unit: "px" }
|
|
2874
|
+
},
|
|
2875
|
+
{
|
|
2876
|
+
property: "borderTopRightRadius",
|
|
2877
|
+
value: { type: "unit", value: 5, unit: "px" }
|
|
2878
|
+
},
|
|
2879
|
+
{
|
|
2880
|
+
property: "borderBottomLeftRadius",
|
|
2881
|
+
value: { type: "unit", value: 5, unit: "px" }
|
|
2882
|
+
},
|
|
2883
|
+
{
|
|
2884
|
+
property: "borderBottomRightRadius",
|
|
2885
|
+
value: { type: "unit", value: 5, unit: "px" }
|
|
2886
|
+
},
|
|
2887
|
+
{
|
|
2888
|
+
property: "cursor",
|
|
2889
|
+
value: { type: "keyword", value: "pointer" }
|
|
2890
|
+
},
|
|
2891
|
+
{
|
|
2892
|
+
property: "backgroundColor",
|
|
2893
|
+
value: {
|
|
2894
|
+
type: "rgb",
|
|
2895
|
+
r: 18,
|
|
2896
|
+
g: 18,
|
|
2897
|
+
b: 18,
|
|
2898
|
+
alpha: 1
|
|
2899
|
+
}
|
|
2900
|
+
},
|
|
2901
|
+
{
|
|
2902
|
+
property: "color",
|
|
2903
|
+
value: {
|
|
2904
|
+
type: "rgb",
|
|
2905
|
+
r: 255,
|
|
2906
|
+
g: 255,
|
|
2907
|
+
b: 255,
|
|
2908
|
+
alpha: 1
|
|
2909
|
+
}
|
|
2910
|
+
},
|
|
2911
|
+
{
|
|
2912
|
+
state: ":hover",
|
|
2913
|
+
property: "backgroundColor",
|
|
2914
|
+
value: {
|
|
2915
|
+
type: "rgb",
|
|
2916
|
+
r: 0,
|
|
2917
|
+
g: 173,
|
|
2918
|
+
b: 239,
|
|
2919
|
+
alpha: 1
|
|
2920
|
+
}
|
|
2921
|
+
}
|
|
2922
|
+
],
|
|
2923
|
+
children: [
|
|
2924
|
+
{
|
|
2925
|
+
type: "instance",
|
|
2926
|
+
component: "Box",
|
|
2927
|
+
label: "Play Icon",
|
|
2928
|
+
styles: [
|
|
2929
|
+
{
|
|
2930
|
+
property: "width",
|
|
2931
|
+
value: { type: "unit", value: 60, unit: "px" }
|
|
2932
|
+
},
|
|
2933
|
+
{
|
|
2934
|
+
property: "height",
|
|
2935
|
+
value: { type: "unit", value: 60, unit: "px" }
|
|
2936
|
+
}
|
|
2937
|
+
],
|
|
2938
|
+
props: [
|
|
2939
|
+
{
|
|
2940
|
+
type: "string",
|
|
2941
|
+
name: "aria-hidden",
|
|
2942
|
+
value: "true"
|
|
2943
|
+
}
|
|
2944
|
+
],
|
|
2945
|
+
children: [
|
|
2946
|
+
{
|
|
2947
|
+
type: "instance",
|
|
2948
|
+
component: "HtmlEmbed",
|
|
2949
|
+
label: "Play SVG",
|
|
2950
|
+
props: [
|
|
2951
|
+
{
|
|
2952
|
+
type: "string",
|
|
2953
|
+
name: "code",
|
|
2954
|
+
value: PlayIcon
|
|
2955
|
+
}
|
|
2956
|
+
],
|
|
2957
|
+
children: []
|
|
2958
|
+
}
|
|
2959
|
+
]
|
|
2960
|
+
}
|
|
2961
|
+
]
|
|
2962
|
+
}
|
|
2963
|
+
]
|
|
2964
|
+
}
|
|
2965
|
+
]
|
|
2966
|
+
};
|
|
2967
|
+
|
|
2968
|
+
// src/vimeo-preview-image.ws.ts
|
|
2969
|
+
import "@webstudio-is/react-sdk";
|
|
2970
|
+
|
|
2971
|
+
// src/__generated__/vimeo-preview-image.props.ts
|
|
2972
|
+
var props5 = {
|
|
2973
|
+
about: { required: false, control: "text", type: "string" },
|
|
2974
|
+
accessKey: {
|
|
2975
|
+
required: false,
|
|
2976
|
+
control: "text",
|
|
2977
|
+
type: "string",
|
|
2978
|
+
description: "Keyboard shortcut to activate or add focus to the element."
|
|
2979
|
+
},
|
|
2980
|
+
alt: {
|
|
2981
|
+
required: false,
|
|
2982
|
+
control: "text",
|
|
2983
|
+
type: "string",
|
|
2984
|
+
description: "Text description of the image, which is very important for accessibility and search engine optimization. Screen readers read this description to users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason."
|
|
2985
|
+
},
|
|
2986
|
+
"aria-activedescendant": {
|
|
2987
|
+
description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
|
|
2988
|
+
required: false,
|
|
2989
|
+
control: "text",
|
|
2990
|
+
type: "string"
|
|
2991
|
+
},
|
|
2992
|
+
"aria-atomic": {
|
|
2993
|
+
description: "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",
|
|
2994
|
+
required: false,
|
|
2995
|
+
control: "boolean",
|
|
2996
|
+
type: "boolean"
|
|
2997
|
+
},
|
|
2998
|
+
"aria-autocomplete": {
|
|
2999
|
+
description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
|
|
3000
|
+
required: false,
|
|
3001
|
+
control: "select",
|
|
3002
|
+
type: "string",
|
|
3003
|
+
options: ["list", "none", "inline", "both"]
|
|
3004
|
+
},
|
|
3005
|
+
"aria-braillelabel": {
|
|
3006
|
+
description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
|
|
3007
|
+
required: false,
|
|
3008
|
+
control: "text",
|
|
3009
|
+
type: "string"
|
|
3010
|
+
},
|
|
3011
|
+
"aria-brailleroledescription": {
|
|
3012
|
+
description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
|
|
3013
|
+
required: false,
|
|
3014
|
+
control: "text",
|
|
3015
|
+
type: "string"
|
|
3016
|
+
},
|
|
3017
|
+
"aria-busy": { required: false, control: "boolean", type: "boolean" },
|
|
3018
|
+
"aria-checked": {
|
|
3019
|
+
description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
|
|
3020
|
+
required: false,
|
|
3021
|
+
control: "text",
|
|
3022
|
+
type: "string"
|
|
3023
|
+
},
|
|
3024
|
+
"aria-colcount": {
|
|
3025
|
+
description: "Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.",
|
|
3026
|
+
required: false,
|
|
3027
|
+
control: "number",
|
|
3028
|
+
type: "number"
|
|
3029
|
+
},
|
|
3030
|
+
"aria-colindex": {
|
|
3031
|
+
description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.",
|
|
3032
|
+
required: false,
|
|
3033
|
+
control: "number",
|
|
3034
|
+
type: "number"
|
|
3035
|
+
},
|
|
3036
|
+
"aria-colindextext": {
|
|
3037
|
+
description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
|
|
3038
|
+
required: false,
|
|
3039
|
+
control: "text",
|
|
3040
|
+
type: "string"
|
|
3041
|
+
},
|
|
3042
|
+
"aria-colspan": {
|
|
3043
|
+
description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
|
|
3044
|
+
required: false,
|
|
3045
|
+
control: "number",
|
|
3046
|
+
type: "number"
|
|
3047
|
+
},
|
|
3048
|
+
"aria-controls": {
|
|
3049
|
+
description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.",
|
|
3050
|
+
required: false,
|
|
3051
|
+
control: "text",
|
|
3052
|
+
type: "string"
|
|
3053
|
+
},
|
|
3054
|
+
"aria-current": {
|
|
3055
|
+
description: "Indicates the element that represents the current item within a container or set of related elements.",
|
|
3056
|
+
required: false,
|
|
3057
|
+
control: "text",
|
|
3058
|
+
type: "string"
|
|
3059
|
+
},
|
|
3060
|
+
"aria-describedby": {
|
|
3061
|
+
description: "Identifies the element (or elements) that describes the object.\n@see aria-labelledby",
|
|
3062
|
+
required: false,
|
|
3063
|
+
control: "text",
|
|
3064
|
+
type: "string"
|
|
3065
|
+
},
|
|
3066
|
+
"aria-description": {
|
|
3067
|
+
description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
|
|
3068
|
+
required: false,
|
|
3069
|
+
control: "text",
|
|
3070
|
+
type: "string"
|
|
3071
|
+
},
|
|
3072
|
+
"aria-details": {
|
|
3073
|
+
description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
|
|
3074
|
+
required: false,
|
|
3075
|
+
control: "text",
|
|
3076
|
+
type: "string"
|
|
3077
|
+
},
|
|
3078
|
+
"aria-disabled": {
|
|
3079
|
+
description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.",
|
|
3080
|
+
required: false,
|
|
3081
|
+
control: "boolean",
|
|
3082
|
+
type: "boolean"
|
|
3083
|
+
},
|
|
3084
|
+
"aria-dropeffect": {
|
|
3085
|
+
description: "Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1",
|
|
3086
|
+
required: false,
|
|
3087
|
+
control: "select",
|
|
3088
|
+
type: "string",
|
|
3089
|
+
options: ["link", "none", "copy", "execute", "move", "popup"]
|
|
3090
|
+
},
|
|
3091
|
+
"aria-errormessage": {
|
|
3092
|
+
description: "Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.",
|
|
3093
|
+
required: false,
|
|
3094
|
+
control: "text",
|
|
3095
|
+
type: "string"
|
|
3096
|
+
},
|
|
3097
|
+
"aria-expanded": {
|
|
3098
|
+
description: "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",
|
|
3099
|
+
required: false,
|
|
3100
|
+
control: "boolean",
|
|
3101
|
+
type: "boolean"
|
|
3102
|
+
},
|
|
3103
|
+
"aria-flowto": {
|
|
3104
|
+
description: "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order.",
|
|
3105
|
+
required: false,
|
|
3106
|
+
control: "text",
|
|
3107
|
+
type: "string"
|
|
3108
|
+
},
|
|
3109
|
+
"aria-grabbed": {
|
|
3110
|
+
description: `Indicates an element's "grabbed" state in a drag-and-drop operation.
|
|
3111
|
+
@deprecated in ARIA 1.1`,
|
|
3112
|
+
required: false,
|
|
3113
|
+
control: "boolean",
|
|
3114
|
+
type: "boolean"
|
|
3115
|
+
},
|
|
3116
|
+
"aria-haspopup": {
|
|
3117
|
+
description: "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",
|
|
3118
|
+
required: false,
|
|
3119
|
+
control: "text",
|
|
3120
|
+
type: "string"
|
|
3121
|
+
},
|
|
3122
|
+
"aria-hidden": {
|
|
3123
|
+
description: "Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.",
|
|
3124
|
+
required: false,
|
|
3125
|
+
control: "boolean",
|
|
3126
|
+
type: "boolean"
|
|
3127
|
+
},
|
|
3128
|
+
"aria-invalid": {
|
|
3129
|
+
description: "Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.",
|
|
3130
|
+
required: false,
|
|
3131
|
+
control: "text",
|
|
3132
|
+
type: "string"
|
|
3133
|
+
},
|
|
3134
|
+
"aria-keyshortcuts": {
|
|
3135
|
+
description: "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",
|
|
3136
|
+
required: false,
|
|
3137
|
+
control: "text",
|
|
3138
|
+
type: "string"
|
|
3139
|
+
},
|
|
3140
|
+
"aria-label": {
|
|
3141
|
+
description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
|
|
3142
|
+
required: false,
|
|
3143
|
+
control: "text",
|
|
3144
|
+
type: "string"
|
|
3145
|
+
},
|
|
3146
|
+
"aria-labelledby": {
|
|
3147
|
+
description: "Identifies the element (or elements) that labels the current element.\n@see aria-describedby.",
|
|
3148
|
+
required: false,
|
|
3149
|
+
control: "text",
|
|
3150
|
+
type: "string"
|
|
3151
|
+
},
|
|
3152
|
+
"aria-level": {
|
|
3153
|
+
description: "Defines the hierarchical level of an element within a structure.",
|
|
3154
|
+
required: false,
|
|
3155
|
+
control: "number",
|
|
3156
|
+
type: "number"
|
|
3157
|
+
},
|
|
3158
|
+
"aria-live": {
|
|
3159
|
+
description: "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.",
|
|
3160
|
+
required: false,
|
|
3161
|
+
control: "radio",
|
|
3162
|
+
type: "string",
|
|
3163
|
+
options: ["off", "assertive", "polite"]
|
|
3164
|
+
},
|
|
3165
|
+
"aria-modal": {
|
|
3166
|
+
description: "Indicates whether an element is modal when displayed.",
|
|
3167
|
+
required: false,
|
|
3168
|
+
control: "boolean",
|
|
3169
|
+
type: "boolean"
|
|
3170
|
+
},
|
|
3171
|
+
"aria-multiline": {
|
|
3172
|
+
description: "Indicates whether a text box accepts multiple lines of input or only a single line.",
|
|
3173
|
+
required: false,
|
|
3174
|
+
control: "boolean",
|
|
3175
|
+
type: "boolean"
|
|
3176
|
+
},
|
|
3177
|
+
"aria-multiselectable": {
|
|
3178
|
+
description: "Indicates that the user may select more than one item from the current selectable descendants.",
|
|
3179
|
+
required: false,
|
|
3180
|
+
control: "boolean",
|
|
3181
|
+
type: "boolean"
|
|
3182
|
+
},
|
|
3183
|
+
"aria-orientation": {
|
|
3184
|
+
description: "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.",
|
|
3185
|
+
required: false,
|
|
3186
|
+
control: "radio",
|
|
3187
|
+
type: "string",
|
|
3188
|
+
options: ["horizontal", "vertical"]
|
|
3189
|
+
},
|
|
3190
|
+
"aria-owns": {
|
|
3191
|
+
description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.",
|
|
3192
|
+
required: false,
|
|
3193
|
+
control: "text",
|
|
3194
|
+
type: "string"
|
|
3195
|
+
},
|
|
3196
|
+
"aria-placeholder": {
|
|
3197
|
+
description: "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format.",
|
|
3198
|
+
required: false,
|
|
3199
|
+
control: "text",
|
|
3200
|
+
type: "string"
|
|
3201
|
+
},
|
|
3202
|
+
"aria-posinset": {
|
|
3203
|
+
description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.",
|
|
3204
|
+
required: false,
|
|
3205
|
+
control: "number",
|
|
3206
|
+
type: "number"
|
|
3207
|
+
},
|
|
3208
|
+
"aria-pressed": {
|
|
3209
|
+
description: 'Indicates the current "pressed" state of toggle buttons.\n@see aria-checked\n@see aria-selected.',
|
|
3210
|
+
required: false,
|
|
3211
|
+
control: "text",
|
|
3212
|
+
type: "string"
|
|
3213
|
+
},
|
|
3214
|
+
"aria-readonly": {
|
|
3215
|
+
description: "Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.",
|
|
3216
|
+
required: false,
|
|
3217
|
+
control: "boolean",
|
|
3218
|
+
type: "boolean"
|
|
3219
|
+
},
|
|
3220
|
+
"aria-relevant": {
|
|
3221
|
+
description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.",
|
|
3222
|
+
required: false,
|
|
3223
|
+
control: "select",
|
|
3224
|
+
type: "string",
|
|
3225
|
+
options: [
|
|
3226
|
+
"text",
|
|
3227
|
+
"additions",
|
|
3228
|
+
"additions removals",
|
|
3229
|
+
"additions text",
|
|
3230
|
+
"all",
|
|
3231
|
+
"removals",
|
|
3232
|
+
"removals additions",
|
|
3233
|
+
"removals text",
|
|
3234
|
+
"text additions",
|
|
3235
|
+
"text removals"
|
|
3236
|
+
]
|
|
3237
|
+
},
|
|
3238
|
+
"aria-required": {
|
|
3239
|
+
description: "Indicates that user input is required on the element before a form may be submitted.",
|
|
3240
|
+
required: false,
|
|
3241
|
+
control: "boolean",
|
|
3242
|
+
type: "boolean"
|
|
3243
|
+
},
|
|
3244
|
+
"aria-roledescription": {
|
|
3245
|
+
description: "Defines a human-readable, author-localized description for the role of an element.",
|
|
3246
|
+
required: false,
|
|
3247
|
+
control: "text",
|
|
3248
|
+
type: "string"
|
|
3249
|
+
},
|
|
3250
|
+
"aria-rowcount": {
|
|
3251
|
+
description: "Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.",
|
|
3252
|
+
required: false,
|
|
3253
|
+
control: "number",
|
|
3254
|
+
type: "number"
|
|
3255
|
+
},
|
|
3256
|
+
"aria-rowindex": {
|
|
3257
|
+
description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.",
|
|
3258
|
+
required: false,
|
|
3259
|
+
control: "number",
|
|
3260
|
+
type: "number"
|
|
3261
|
+
},
|
|
3262
|
+
"aria-rowindextext": {
|
|
3263
|
+
description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
|
|
3264
|
+
required: false,
|
|
3265
|
+
control: "text",
|
|
3266
|
+
type: "string"
|
|
3267
|
+
},
|
|
3268
|
+
"aria-rowspan": {
|
|
3269
|
+
description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
|
|
3270
|
+
required: false,
|
|
3271
|
+
control: "number",
|
|
3272
|
+
type: "number"
|
|
3273
|
+
},
|
|
3274
|
+
"aria-selected": {
|
|
3275
|
+
description: 'Indicates the current "selected" state of various widgets.\n@see aria-checked\n@see aria-pressed.',
|
|
3276
|
+
required: false,
|
|
3277
|
+
control: "boolean",
|
|
3278
|
+
type: "boolean"
|
|
3279
|
+
},
|
|
3280
|
+
"aria-setsize": {
|
|
3281
|
+
description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.",
|
|
3282
|
+
required: false,
|
|
3283
|
+
control: "number",
|
|
3284
|
+
type: "number"
|
|
3285
|
+
},
|
|
3286
|
+
"aria-sort": {
|
|
3287
|
+
description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
|
|
3288
|
+
required: false,
|
|
3289
|
+
control: "select",
|
|
3290
|
+
type: "string",
|
|
3291
|
+
options: ["none", "ascending", "descending", "other"]
|
|
3292
|
+
},
|
|
3293
|
+
"aria-valuemax": {
|
|
3294
|
+
description: "Defines the maximum allowed value for a range widget.",
|
|
3295
|
+
required: false,
|
|
3296
|
+
control: "number",
|
|
3297
|
+
type: "number"
|
|
3298
|
+
},
|
|
3299
|
+
"aria-valuemin": {
|
|
3300
|
+
description: "Defines the minimum allowed value for a range widget.",
|
|
3301
|
+
required: false,
|
|
3302
|
+
control: "number",
|
|
3303
|
+
type: "number"
|
|
3304
|
+
},
|
|
3305
|
+
"aria-valuenow": {
|
|
3306
|
+
description: "Defines the current value for a range widget.\n@see aria-valuetext.",
|
|
3307
|
+
required: false,
|
|
3308
|
+
control: "number",
|
|
3309
|
+
type: "number"
|
|
3310
|
+
},
|
|
3311
|
+
"aria-valuetext": {
|
|
3312
|
+
description: "Defines the human readable text alternative of aria-valuenow for a range widget.",
|
|
3313
|
+
required: false,
|
|
3314
|
+
control: "text",
|
|
3315
|
+
type: "string"
|
|
3316
|
+
},
|
|
3317
|
+
autoCapitalize: {
|
|
3318
|
+
required: false,
|
|
3319
|
+
control: "text",
|
|
3320
|
+
type: "string",
|
|
3321
|
+
description: "Sets whether input is automatically capitalized when entered by user."
|
|
3322
|
+
},
|
|
3323
|
+
autoCorrect: { required: false, control: "text", type: "string" },
|
|
3324
|
+
autoFocus: {
|
|
3325
|
+
required: false,
|
|
3326
|
+
control: "boolean",
|
|
3327
|
+
type: "boolean",
|
|
3328
|
+
description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
|
|
3329
|
+
},
|
|
3330
|
+
autoSave: { required: false, control: "text", type: "string" },
|
|
3331
|
+
className: { required: false, control: "text", type: "string" },
|
|
3332
|
+
color: {
|
|
3333
|
+
required: false,
|
|
3334
|
+
control: "color",
|
|
3335
|
+
type: "string",
|
|
3336
|
+
description: "This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
|
|
3337
|
+
},
|
|
3338
|
+
content: {
|
|
3339
|
+
required: false,
|
|
3340
|
+
control: "text",
|
|
3341
|
+
type: "string",
|
|
3342
|
+
description: "A value associated with http-equiv orname depending on the context."
|
|
3343
|
+
},
|
|
3344
|
+
contextMenu: {
|
|
3345
|
+
required: false,
|
|
3346
|
+
control: "text",
|
|
3347
|
+
type: "string",
|
|
3348
|
+
description: "Defines the ID of a menu element which willserve as the element's context menu."
|
|
3349
|
+
},
|
|
3350
|
+
crossOrigin: {
|
|
3351
|
+
required: false,
|
|
3352
|
+
control: "radio",
|
|
3353
|
+
type: "string",
|
|
3354
|
+
options: ["", "anonymous", "use-credentials"],
|
|
3355
|
+
description: "How the element handles cross-origin requests"
|
|
3356
|
+
},
|
|
3357
|
+
datatype: { required: false, control: "text", type: "string" },
|
|
3358
|
+
decoding: {
|
|
3359
|
+
required: false,
|
|
3360
|
+
control: "radio",
|
|
3361
|
+
type: "string",
|
|
3362
|
+
options: ["async", "auto", "sync"],
|
|
3363
|
+
description: "Indicates the preferred method to decode the image."
|
|
3364
|
+
},
|
|
3365
|
+
defaultChecked: { required: false, control: "boolean", type: "boolean" },
|
|
3366
|
+
dir: {
|
|
3367
|
+
required: false,
|
|
3368
|
+
control: "text",
|
|
3369
|
+
type: "string",
|
|
3370
|
+
description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
|
|
3371
|
+
},
|
|
3372
|
+
draggable: {
|
|
3373
|
+
required: false,
|
|
3374
|
+
control: "boolean",
|
|
3375
|
+
type: "boolean",
|
|
3376
|
+
description: "Defines whether the element can be dragged."
|
|
3377
|
+
},
|
|
3378
|
+
height: {
|
|
3379
|
+
required: false,
|
|
3380
|
+
control: "number",
|
|
3381
|
+
type: "number",
|
|
3382
|
+
description: "Defines the image\u2019s height in pixels."
|
|
3383
|
+
},
|
|
3384
|
+
hidden: {
|
|
3385
|
+
required: false,
|
|
3386
|
+
control: "boolean",
|
|
3387
|
+
type: "boolean",
|
|
3388
|
+
description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
|
|
3389
|
+
},
|
|
3390
|
+
id: {
|
|
3391
|
+
required: false,
|
|
3392
|
+
control: "text",
|
|
3393
|
+
type: "string",
|
|
3394
|
+
description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
|
|
3395
|
+
},
|
|
3396
|
+
inputMode: {
|
|
3397
|
+
description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
|
|
3398
|
+
required: false,
|
|
3399
|
+
control: "select",
|
|
3400
|
+
type: "string",
|
|
3401
|
+
options: [
|
|
3402
|
+
"search",
|
|
3403
|
+
"text",
|
|
3404
|
+
"none",
|
|
3405
|
+
"tel",
|
|
3406
|
+
"url",
|
|
3407
|
+
"email",
|
|
3408
|
+
"numeric",
|
|
3409
|
+
"decimal"
|
|
3410
|
+
]
|
|
3411
|
+
},
|
|
3412
|
+
is: {
|
|
3413
|
+
description: "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
|
|
3414
|
+
required: false,
|
|
3415
|
+
control: "text",
|
|
3416
|
+
type: "string"
|
|
3417
|
+
},
|
|
3418
|
+
itemID: { required: false, control: "text", type: "string" },
|
|
3419
|
+
itemProp: { required: false, control: "text", type: "string" },
|
|
3420
|
+
itemRef: { required: false, control: "text", type: "string" },
|
|
3421
|
+
itemScope: { required: false, control: "boolean", type: "boolean" },
|
|
3422
|
+
itemType: { required: false, control: "text", type: "string" },
|
|
3423
|
+
lang: {
|
|
3424
|
+
required: false,
|
|
3425
|
+
control: "text",
|
|
3426
|
+
type: "string",
|
|
3427
|
+
description: "Defines the language used in the element."
|
|
3428
|
+
},
|
|
3429
|
+
loading: {
|
|
3430
|
+
required: false,
|
|
3431
|
+
control: "radio",
|
|
3432
|
+
type: "string",
|
|
3433
|
+
options: ["eager", "lazy"],
|
|
3434
|
+
description: "Determines whether the image will load as soon as possible (Eager), or when it scrolls into view (Lazy). Lazy loading is a great option for pages with many images because it can significantly reduce the time it takes for the page to load initially."
|
|
3435
|
+
},
|
|
3436
|
+
nonce: { required: false, control: "text", type: "string" },
|
|
3437
|
+
optimize: { required: false, control: "boolean", type: "boolean" },
|
|
3438
|
+
placeholder: {
|
|
3439
|
+
required: false,
|
|
3440
|
+
control: "text",
|
|
3441
|
+
type: "string",
|
|
3442
|
+
description: "Provides a hint to the user of what can be entered in the field."
|
|
3443
|
+
},
|
|
3444
|
+
prefix: { required: false, control: "text", type: "string" },
|
|
3445
|
+
property: { required: false, control: "text", type: "string" },
|
|
3446
|
+
quality: { required: false, control: "number", type: "number" },
|
|
3447
|
+
radioGroup: { required: false, control: "text", type: "string" },
|
|
3448
|
+
referrerPolicy: {
|
|
3449
|
+
required: false,
|
|
3450
|
+
control: "select",
|
|
3451
|
+
type: "string",
|
|
3452
|
+
options: [
|
|
3453
|
+
"",
|
|
3454
|
+
"no-referrer",
|
|
3455
|
+
"no-referrer-when-downgrade",
|
|
3456
|
+
"origin",
|
|
3457
|
+
"origin-when-cross-origin",
|
|
3458
|
+
"same-origin",
|
|
3459
|
+
"strict-origin",
|
|
3460
|
+
"strict-origin-when-cross-origin",
|
|
3461
|
+
"unsafe-url"
|
|
3462
|
+
],
|
|
3463
|
+
description: "Specifies which referrer is sent when fetching the resource."
|
|
3464
|
+
},
|
|
3465
|
+
rel: {
|
|
3466
|
+
required: false,
|
|
3467
|
+
control: "text",
|
|
3468
|
+
type: "string",
|
|
3469
|
+
description: "Specifies the relationship of the target object to the link object."
|
|
3470
|
+
},
|
|
3471
|
+
resource: { required: false, control: "text", type: "string" },
|
|
3472
|
+
results: { required: false, control: "number", type: "number" },
|
|
3473
|
+
rev: { required: false, control: "text", type: "string" },
|
|
3474
|
+
role: {
|
|
3475
|
+
required: false,
|
|
3476
|
+
control: "text",
|
|
3477
|
+
type: "string",
|
|
3478
|
+
description: "Defines an explicit role for an element for use by assistive technologies."
|
|
3479
|
+
},
|
|
3480
|
+
security: { required: false, control: "text", type: "string" },
|
|
3481
|
+
sizes: { required: false, control: "text", type: "string" },
|
|
3482
|
+
slot: {
|
|
3483
|
+
required: false,
|
|
3484
|
+
control: "text",
|
|
3485
|
+
type: "string",
|
|
3486
|
+
description: "Assigns a slot in a shadow DOM shadow tree to an element."
|
|
3487
|
+
},
|
|
3488
|
+
spellCheck: {
|
|
3489
|
+
required: false,
|
|
3490
|
+
control: "boolean",
|
|
3491
|
+
type: "boolean",
|
|
3492
|
+
description: "Indicates whether spell checking is allowed for the element."
|
|
3493
|
+
},
|
|
3494
|
+
src: {
|
|
3495
|
+
required: false,
|
|
3496
|
+
control: "text",
|
|
3497
|
+
type: "string",
|
|
3498
|
+
description: "The URL of the embeddable content."
|
|
3499
|
+
},
|
|
3500
|
+
srcSet: {
|
|
3501
|
+
required: false,
|
|
3502
|
+
control: "text",
|
|
3503
|
+
type: "string",
|
|
3504
|
+
description: "One or more responsive image candidates."
|
|
3505
|
+
},
|
|
3506
|
+
suppressContentEditableWarning: {
|
|
3507
|
+
required: false,
|
|
3508
|
+
control: "boolean",
|
|
3509
|
+
type: "boolean"
|
|
3510
|
+
},
|
|
3511
|
+
suppressHydrationWarning: {
|
|
3512
|
+
required: false,
|
|
3513
|
+
control: "boolean",
|
|
3514
|
+
type: "boolean"
|
|
3515
|
+
},
|
|
3516
|
+
tabIndex: {
|
|
3517
|
+
required: false,
|
|
3518
|
+
control: "number",
|
|
3519
|
+
type: "number",
|
|
3520
|
+
description: "Overrides the browser's default tab order and follows the one specified instead."
|
|
3521
|
+
},
|
|
3522
|
+
title: {
|
|
3523
|
+
required: false,
|
|
3524
|
+
control: "text",
|
|
3525
|
+
type: "string",
|
|
3526
|
+
description: "Text to be displayed in a tooltip when hovering over the element."
|
|
3527
|
+
},
|
|
3528
|
+
translate: {
|
|
3529
|
+
required: false,
|
|
3530
|
+
control: "radio",
|
|
3531
|
+
type: "string",
|
|
3532
|
+
options: ["yes", "no"],
|
|
3533
|
+
description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
|
|
3534
|
+
},
|
|
3535
|
+
typeof: { required: false, control: "text", type: "string" },
|
|
3536
|
+
unselectable: {
|
|
3537
|
+
required: false,
|
|
3538
|
+
control: "radio",
|
|
3539
|
+
type: "string",
|
|
3540
|
+
options: ["on", "off"]
|
|
3541
|
+
},
|
|
3542
|
+
useMap: { required: false, control: "text", type: "string" },
|
|
3543
|
+
vocab: { required: false, control: "text", type: "string" },
|
|
3544
|
+
width: {
|
|
3545
|
+
required: false,
|
|
3546
|
+
control: "number",
|
|
3547
|
+
type: "number",
|
|
3548
|
+
description: "Defines the image\u2019s width in pixels."
|
|
3549
|
+
}
|
|
3550
|
+
};
|
|
3551
|
+
|
|
3552
|
+
// src/vimeo-preview-image.ws.ts
|
|
3553
|
+
var meta30 = {
|
|
3554
|
+
...meta19,
|
|
3555
|
+
category: "hidden",
|
|
3556
|
+
label: "Preview Image",
|
|
3557
|
+
requiredAncestors: ["Vimeo"]
|
|
3558
|
+
};
|
|
3559
|
+
var propsMeta5 = {
|
|
3560
|
+
props: { ...props5, ...propsOverrides },
|
|
3561
|
+
initialProps: propsMeta3.initialProps
|
|
3562
|
+
};
|
|
3563
|
+
|
|
3564
|
+
// src/vimeo-play-button.ws.ts
|
|
3565
|
+
import {
|
|
3566
|
+
defaultStates as defaultStates26
|
|
3567
|
+
} from "@webstudio-is/react-sdk";
|
|
3568
|
+
import { ButtonElementIcon as ButtonElementIcon2 } from "@webstudio-is/icons/svg";
|
|
3569
|
+
import { button as button2 } from "@webstudio-is/react-sdk/css-normalize";
|
|
3570
|
+
var presetStyle26 = {
|
|
3571
|
+
button: button2
|
|
3572
|
+
};
|
|
3573
|
+
var meta31 = {
|
|
3574
|
+
category: "hidden",
|
|
3575
|
+
type: "container",
|
|
3576
|
+
invalidAncestors: ["Button"],
|
|
3577
|
+
requiredAncestors: ["Vimeo"],
|
|
3578
|
+
label: "Play Button",
|
|
3579
|
+
icon: ButtonElementIcon2,
|
|
3580
|
+
presetStyle: presetStyle26,
|
|
3581
|
+
states: defaultStates26
|
|
3582
|
+
};
|
|
3583
|
+
|
|
3584
|
+
// src/vimeo-spinner.ws.ts
|
|
3585
|
+
import {
|
|
3586
|
+
defaultStates as defaultStates27
|
|
3587
|
+
} from "@webstudio-is/react-sdk";
|
|
3588
|
+
import { div as div4 } from "@webstudio-is/react-sdk/css-normalize";
|
|
3589
|
+
import { BoxIcon as BoxIcon2 } from "@webstudio-is/icons/svg";
|
|
3590
|
+
var presetStyle27 = {
|
|
3591
|
+
div: div4
|
|
3592
|
+
};
|
|
3593
|
+
var meta32 = {
|
|
3594
|
+
type: "container",
|
|
3595
|
+
icon: BoxIcon2,
|
|
3596
|
+
states: defaultStates27,
|
|
3597
|
+
presetStyle: presetStyle27,
|
|
3598
|
+
category: "hidden",
|
|
3599
|
+
label: "Spinner",
|
|
3600
|
+
requiredAncestors: ["Vimeo"]
|
|
3601
|
+
};
|
|
3602
|
+
export {
|
|
3603
|
+
meta20 as Blockquote,
|
|
3604
|
+
meta4 as Body,
|
|
3605
|
+
meta12 as Bold,
|
|
3606
|
+
meta5 as Box,
|
|
3607
|
+
meta16 as Button,
|
|
3608
|
+
meta28 as Checkbox,
|
|
3609
|
+
meta24 as CodeText,
|
|
3610
|
+
meta18 as Form,
|
|
3611
|
+
meta2 as Fragment,
|
|
3612
|
+
meta7 as Heading,
|
|
3613
|
+
meta3 as HtmlEmbed,
|
|
3614
|
+
meta19 as Image,
|
|
3615
|
+
meta17 as Input,
|
|
3616
|
+
meta13 as Italic,
|
|
3617
|
+
meta25 as Label,
|
|
3618
|
+
meta9 as Link,
|
|
3619
|
+
meta21 as List,
|
|
3620
|
+
meta22 as ListItem,
|
|
3621
|
+
meta8 as Paragraph,
|
|
3622
|
+
meta27 as RadioButton,
|
|
3623
|
+
meta10 as RichTextLink,
|
|
3624
|
+
meta23 as Separator,
|
|
3625
|
+
meta as Slot,
|
|
3626
|
+
meta11 as Span,
|
|
3627
|
+
meta15 as Subscript,
|
|
3628
|
+
meta14 as Superscript,
|
|
3629
|
+
meta6 as Text,
|
|
3630
|
+
meta26 as Textarea,
|
|
3631
|
+
meta29 as Vimeo,
|
|
3632
|
+
meta31 as VimeoPlayButton,
|
|
3633
|
+
meta30 as VimeoPreviewImage,
|
|
3634
|
+
meta32 as VimeoSpinner
|
|
3635
|
+
};
|