@emuanalytics/flow-rdf-ui 4.1.21 → 4.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +5770 -5770
- package/dist/package.json.mjs +1 -1
- package/dist/vscode.html-custom-data.json +459 -459
- package/package.json +3 -3
|
@@ -2,131 +2,62 @@
|
|
|
2
2
|
"version": 1.1,
|
|
3
3
|
"tags": [
|
|
4
4
|
{
|
|
5
|
-
"name": "flow-ui-
|
|
6
|
-
"description": "
|
|
7
|
-
"attributes": [
|
|
8
|
-
{
|
|
9
|
-
"name": "open",
|
|
10
|
-
"description": "Set to `true` to display the alert. You can also\nuse the `show()` and `hide()` methods.",
|
|
11
|
-
"values": []
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
"name": "closable",
|
|
15
|
-
"description": "Enables a close button that allows the user to dismiss the alert.",
|
|
16
|
-
"values": []
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"name": "variant",
|
|
20
|
-
"description": "The alert's theme variant.",
|
|
21
|
-
"values": [
|
|
22
|
-
{ "name": "primary" },
|
|
23
|
-
{ "name": "secondary" },
|
|
24
|
-
{ "name": "success" },
|
|
25
|
-
{ "name": "neutral" },
|
|
26
|
-
{ "name": "warning" },
|
|
27
|
-
{ "name": "danger" }
|
|
28
|
-
]
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
"name": "duration",
|
|
32
|
-
"description": "The length of time (in ms) that the alert will show itself before closing. If the user interacts with\nthe alert before it closes (e.g. by moving the mouse over it), the timer will restart.",
|
|
33
|
-
"values": []
|
|
34
|
-
}
|
|
35
|
-
],
|
|
36
|
-
"references": []
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"name": "flow-ui-avatar",
|
|
40
|
-
"description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
|
|
5
|
+
"name": "flow-ui-animation",
|
|
6
|
+
"description": "Animate elements declaratively with over 100 animation presets. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-cancel** - Emitted when the animation is canceled.\n- **flow-ui-finish** - Emitted when the animation finishes.\n- **flow-ui-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<flow-ui-animation>` elements.",
|
|
41
7
|
"attributes": [
|
|
42
8
|
{
|
|
43
|
-
"name": "
|
|
44
|
-
"description": "The
|
|
45
|
-
"values": []
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
"name": "label",
|
|
49
|
-
"description": "A label to use to describe the avatar to assistive devices.",
|
|
9
|
+
"name": "name",
|
|
10
|
+
"description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.\nUse `getAnimationNames()` to retrieve a list of available animations.",
|
|
50
11
|
"values": []
|
|
51
12
|
},
|
|
52
13
|
{
|
|
53
|
-
"name": "
|
|
54
|
-
"description": "
|
|
14
|
+
"name": "play",
|
|
15
|
+
"description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
|
|
55
16
|
"values": []
|
|
56
17
|
},
|
|
57
18
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
60
|
-
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"name": "shape",
|
|
64
|
-
"description": "The shape of the avatar.",
|
|
65
|
-
"values": [
|
|
66
|
-
{ "name": "circle" },
|
|
67
|
-
{ "name": "square" },
|
|
68
|
-
{ "name": "rounded" }
|
|
69
|
-
]
|
|
70
|
-
}
|
|
71
|
-
],
|
|
72
|
-
"references": []
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
"name": "flow-ui-base-control",
|
|
76
|
-
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when an alteration to the control's value is committed by the user.\n- **flow-ui-clear** - Emitted when the clear button is activated.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
|
|
77
|
-
"attributes": [
|
|
78
|
-
{
|
|
79
|
-
"name": "size",
|
|
80
|
-
"description": "The input's size.",
|
|
81
|
-
"values": [
|
|
82
|
-
{ "name": "small" },
|
|
83
|
-
{ "name": "medium" },
|
|
84
|
-
{ "name": "large" }
|
|
85
|
-
]
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
"name": "filled",
|
|
89
|
-
"description": "Draws a filled input.",
|
|
19
|
+
"name": "delay",
|
|
20
|
+
"description": "The number of milliseconds to delay the start of the animation.",
|
|
90
21
|
"values": []
|
|
91
22
|
},
|
|
92
23
|
{
|
|
93
|
-
"name": "
|
|
94
|
-
"description": "
|
|
95
|
-
"values": []
|
|
24
|
+
"name": "direction",
|
|
25
|
+
"description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)",
|
|
26
|
+
"values": [{ "name": "PlaybackDirection" }]
|
|
96
27
|
},
|
|
97
28
|
{
|
|
98
|
-
"name": "
|
|
99
|
-
"description": "The
|
|
29
|
+
"name": "duration",
|
|
30
|
+
"description": "The number of milliseconds each iteration of the animation takes to complete.",
|
|
100
31
|
"values": []
|
|
101
32
|
},
|
|
102
33
|
{
|
|
103
|
-
"name": "
|
|
104
|
-
"description": "The
|
|
34
|
+
"name": "easing",
|
|
35
|
+
"description": "The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
|
|
105
36
|
"values": []
|
|
106
37
|
},
|
|
107
38
|
{
|
|
108
|
-
"name": "
|
|
109
|
-
"description": "
|
|
39
|
+
"name": "end-delay",
|
|
40
|
+
"description": "The number of milliseconds to delay after the active period of an animation sequence.",
|
|
110
41
|
"values": []
|
|
111
42
|
},
|
|
112
43
|
{
|
|
113
|
-
"name": "
|
|
114
|
-
"description": "
|
|
115
|
-
"values": []
|
|
44
|
+
"name": "fill",
|
|
45
|
+
"description": "Sets how the animation applies styles to its target before and after its execution.",
|
|
46
|
+
"values": [{ "name": "FillMode" }]
|
|
116
47
|
},
|
|
117
48
|
{
|
|
118
|
-
"name": "
|
|
119
|
-
"description": "
|
|
49
|
+
"name": "iterations",
|
|
50
|
+
"description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
|
|
120
51
|
"values": []
|
|
121
52
|
},
|
|
122
53
|
{
|
|
123
|
-
"name": "
|
|
124
|
-
"description": "
|
|
54
|
+
"name": "iteration-start",
|
|
55
|
+
"description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
|
|
125
56
|
"values": []
|
|
126
57
|
},
|
|
127
58
|
{
|
|
128
|
-
"name": "
|
|
129
|
-
"description": "
|
|
59
|
+
"name": "playback-rate",
|
|
60
|
+
"description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
|
|
130
61
|
"values": []
|
|
131
62
|
}
|
|
132
63
|
],
|
|
@@ -236,6 +167,40 @@
|
|
|
236
167
|
],
|
|
237
168
|
"references": []
|
|
238
169
|
},
|
|
170
|
+
{
|
|
171
|
+
"name": "flow-ui-alert",
|
|
172
|
+
"description": "Alerts are used to display important messages inline or as toast notifications.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the alert opens.\n- **flow-ui-after-show** - Emitted after the alert opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the alert closes.\n- **flow-ui-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast(): _Promise<void>_** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
|
|
173
|
+
"attributes": [
|
|
174
|
+
{
|
|
175
|
+
"name": "open",
|
|
176
|
+
"description": "Set to `true` to display the alert. You can also\nuse the `show()` and `hide()` methods.",
|
|
177
|
+
"values": []
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"name": "closable",
|
|
181
|
+
"description": "Enables a close button that allows the user to dismiss the alert.",
|
|
182
|
+
"values": []
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"name": "variant",
|
|
186
|
+
"description": "The alert's theme variant.",
|
|
187
|
+
"values": [
|
|
188
|
+
{ "name": "primary" },
|
|
189
|
+
{ "name": "secondary" },
|
|
190
|
+
{ "name": "success" },
|
|
191
|
+
{ "name": "neutral" },
|
|
192
|
+
{ "name": "warning" },
|
|
193
|
+
{ "name": "danger" }
|
|
194
|
+
]
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"name": "duration",
|
|
198
|
+
"description": "The length of time (in ms) that the alert will show itself before closing. If the user interacts with\nthe alert before it closes (e.g. by moving the mouse over it), the timer will restart.",
|
|
199
|
+
"values": []
|
|
200
|
+
}
|
|
201
|
+
],
|
|
202
|
+
"references": []
|
|
203
|
+
},
|
|
239
204
|
{
|
|
240
205
|
"name": "flow-ui-badge",
|
|
241
206
|
"description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -275,74 +240,97 @@
|
|
|
275
240
|
"references": []
|
|
276
241
|
},
|
|
277
242
|
{
|
|
278
|
-
"name": "flow-ui-
|
|
279
|
-
"description": "
|
|
243
|
+
"name": "flow-ui-avatar",
|
|
244
|
+
"description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
|
|
280
245
|
"attributes": [
|
|
281
246
|
{
|
|
282
|
-
"name": "
|
|
283
|
-
"description": "The
|
|
247
|
+
"name": "image",
|
|
248
|
+
"description": "The image source to use for the avatar.",
|
|
284
249
|
"values": []
|
|
285
250
|
},
|
|
286
251
|
{
|
|
287
|
-
"name": "
|
|
288
|
-
"description": "
|
|
252
|
+
"name": "label",
|
|
253
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
289
254
|
"values": []
|
|
290
255
|
},
|
|
291
256
|
{
|
|
292
|
-
"name": "
|
|
293
|
-
"description": "
|
|
257
|
+
"name": "initials",
|
|
258
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
294
259
|
"values": []
|
|
295
260
|
},
|
|
296
261
|
{
|
|
297
|
-
"name": "
|
|
298
|
-
"description": "
|
|
299
|
-
"values": [{ "name": "
|
|
262
|
+
"name": "loading",
|
|
263
|
+
"description": "Indicates how the browser should load the image.",
|
|
264
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
300
265
|
},
|
|
301
266
|
{
|
|
302
|
-
"name": "
|
|
303
|
-
"description": "The
|
|
267
|
+
"name": "shape",
|
|
268
|
+
"description": "The shape of the avatar.",
|
|
269
|
+
"values": [
|
|
270
|
+
{ "name": "circle" },
|
|
271
|
+
{ "name": "square" },
|
|
272
|
+
{ "name": "rounded" }
|
|
273
|
+
]
|
|
274
|
+
}
|
|
275
|
+
],
|
|
276
|
+
"references": []
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"name": "flow-ui-base-control",
|
|
280
|
+
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when an alteration to the control's value is committed by the user.\n- **flow-ui-clear** - Emitted when the clear button is activated.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
|
|
281
|
+
"attributes": [
|
|
282
|
+
{
|
|
283
|
+
"name": "size",
|
|
284
|
+
"description": "The input's size.",
|
|
285
|
+
"values": [
|
|
286
|
+
{ "name": "small" },
|
|
287
|
+
{ "name": "medium" },
|
|
288
|
+
{ "name": "large" }
|
|
289
|
+
]
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
"name": "filled",
|
|
293
|
+
"description": "Draws a filled input.",
|
|
304
294
|
"values": []
|
|
305
295
|
},
|
|
306
296
|
{
|
|
307
|
-
"name": "
|
|
308
|
-
"description": "
|
|
297
|
+
"name": "pill",
|
|
298
|
+
"description": "Draws a pill-style input with rounded edges.",
|
|
309
299
|
"values": []
|
|
310
300
|
},
|
|
311
301
|
{
|
|
312
|
-
"name": "
|
|
313
|
-
"description": "The
|
|
302
|
+
"name": "label",
|
|
303
|
+
"description": "The input's label. If you need to display HTML, use the `label` slot instead.",
|
|
314
304
|
"values": []
|
|
315
305
|
},
|
|
316
306
|
{
|
|
317
|
-
"name": "
|
|
318
|
-
"description": "
|
|
319
|
-
"values": [
|
|
307
|
+
"name": "help-text",
|
|
308
|
+
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
309
|
+
"values": []
|
|
320
310
|
},
|
|
321
311
|
{
|
|
322
|
-
"name": "
|
|
323
|
-
"description": "
|
|
312
|
+
"name": "disabled",
|
|
313
|
+
"description": "Disables the input.",
|
|
324
314
|
"values": []
|
|
325
315
|
},
|
|
326
316
|
{
|
|
327
|
-
"name": "
|
|
328
|
-
"description": "
|
|
317
|
+
"name": "form",
|
|
318
|
+
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
329
319
|
"values": []
|
|
330
320
|
},
|
|
331
321
|
{
|
|
332
|
-
"name": "
|
|
333
|
-
"description": "
|
|
322
|
+
"name": "required",
|
|
323
|
+
"description": "Makes the input a required field.",
|
|
334
324
|
"values": []
|
|
335
|
-
}
|
|
336
|
-
],
|
|
337
|
-
"references": []
|
|
338
|
-
},
|
|
339
|
-
{
|
|
340
|
-
"name": "flow-ui-breadcrumb",
|
|
341
|
-
"description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
342
|
-
"attributes": [
|
|
325
|
+
},
|
|
343
326
|
{
|
|
344
|
-
"name": "
|
|
345
|
-
"description": "
|
|
327
|
+
"name": "inline",
|
|
328
|
+
"description": "Display the input in the 'inline' form control style.",
|
|
329
|
+
"values": []
|
|
330
|
+
},
|
|
331
|
+
{
|
|
332
|
+
"name": "divider",
|
|
333
|
+
"description": "Indicates that the control should display a divider",
|
|
346
334
|
"values": []
|
|
347
335
|
}
|
|
348
336
|
],
|
|
@@ -375,6 +363,18 @@
|
|
|
375
363
|
],
|
|
376
364
|
"references": []
|
|
377
365
|
},
|
|
366
|
+
{
|
|
367
|
+
"name": "flow-ui-breadcrumb",
|
|
368
|
+
"description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
369
|
+
"attributes": [
|
|
370
|
+
{
|
|
371
|
+
"name": "label",
|
|
372
|
+
"description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
|
|
373
|
+
"values": []
|
|
374
|
+
}
|
|
375
|
+
],
|
|
376
|
+
"references": []
|
|
377
|
+
},
|
|
378
378
|
{
|
|
379
379
|
"name": "flow-ui-busy-overlay",
|
|
380
380
|
"description": "Busy overlay is used to indicate that a component which displays data is being currently updated.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The component to overlay with when busy.\n- **busy-animation** - The indeterminate custom loading animation to display when busy.\n\n### **CSS Properties:**\n - **--transition-delay** - The delay after which the overlay is shown. _(default: undefined)_\n- **--transition-duration** - The duration of the overlay's fade-in/out transition. _(default: undefined)_\n- **--progress-ring-size** - The size of the default progress ring loading animation. _(default: undefined)_\n- **--progress-ring-track-width** - The width of the default progress ring's track. _(default: undefined)_\n- **--progress-ring-track-color** - The color of the default progress ring's track. _(default: undefined)_\n- **--overlay-background-color** - The background color of the overlay. _(default: undefined)_",
|
|
@@ -616,12 +616,6 @@
|
|
|
616
616
|
],
|
|
617
617
|
"references": []
|
|
618
618
|
},
|
|
619
|
-
{
|
|
620
|
-
"name": "flow-ui-card",
|
|
621
|
-
"description": "Cards can be used to group related subjects in a container.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
|
|
622
|
-
"attributes": [{ "name": "title", "values": [] }],
|
|
623
|
-
"references": []
|
|
624
|
-
},
|
|
625
619
|
{
|
|
626
620
|
"name": "flow-ui-carousel",
|
|
627
621
|
"description": "Carousels display an arbitrary number of content slides along a horizontal or vertical axis.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-slide-change** - Emitted when the active slide changes.\n\n### **Methods:**\n - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n\n### **Slots:**\n - _default_ - The carousel's main content, one or more `<flow-ui-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<flow-ui-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--aspect-ratio** - The aspect ratio of each slide. _(default: undefined)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **pagination** - The pagination indicators wrapper.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.",
|
|
@@ -674,6 +668,12 @@
|
|
|
674
668
|
],
|
|
675
669
|
"references": []
|
|
676
670
|
},
|
|
671
|
+
{
|
|
672
|
+
"name": "flow-ui-card",
|
|
673
|
+
"description": "Cards can be used to group related subjects in a container.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
|
|
674
|
+
"attributes": [{ "name": "title", "values": [] }],
|
|
675
|
+
"references": []
|
|
676
|
+
},
|
|
677
677
|
{
|
|
678
678
|
"name": "flow-ui-carousel-item",
|
|
679
679
|
"description": "A carousel item represent a slide within a [carousel](./flow-ui-carousel).\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The carousel item's content..\n\n### **CSS Properties:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_",
|
|
@@ -1188,18 +1188,6 @@
|
|
|
1188
1188
|
],
|
|
1189
1189
|
"references": []
|
|
1190
1190
|
},
|
|
1191
|
-
{
|
|
1192
|
-
"name": "flow-ui-divider",
|
|
1193
|
-
"description": "Dividers are used to visually separate or group elements.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
|
|
1194
|
-
"attributes": [
|
|
1195
|
-
{
|
|
1196
|
-
"name": "vertical",
|
|
1197
|
-
"description": "Draws the divider in a vertical orientation.",
|
|
1198
|
-
"values": []
|
|
1199
|
-
}
|
|
1200
|
-
],
|
|
1201
|
-
"references": []
|
|
1202
|
-
},
|
|
1203
1191
|
{
|
|
1204
1192
|
"name": "flow-ui-drawer",
|
|
1205
1193
|
"description": "Drawers slide in from a container to expose additional options and information.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the drawer opens.\n- **flow-ui-after-show** - Emitted after the drawer opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the drawer closes.\n- **flow-ui-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **flow-ui-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **flow-ui-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<flow-ui-icon-button>`.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
|
|
@@ -1237,6 +1225,18 @@
|
|
|
1237
1225
|
],
|
|
1238
1226
|
"references": []
|
|
1239
1227
|
},
|
|
1228
|
+
{
|
|
1229
|
+
"name": "flow-ui-divider",
|
|
1230
|
+
"description": "Dividers are used to visually separate or group elements.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
|
|
1231
|
+
"attributes": [
|
|
1232
|
+
{
|
|
1233
|
+
"name": "vertical",
|
|
1234
|
+
"description": "Draws the divider in a vertical orientation.",
|
|
1235
|
+
"values": []
|
|
1236
|
+
}
|
|
1237
|
+
],
|
|
1238
|
+
"references": []
|
|
1239
|
+
},
|
|
1240
1240
|
{
|
|
1241
1241
|
"name": "flow-ui-dropdown",
|
|
1242
1242
|
"description": "Dropdowns expose additional content that \"drops down\" in a panel.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the dropdown opens.\n- **flow-ui-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the dropdown closes.\n- **flow-ui-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<flow-ui-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<flow-ui-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
|
|
@@ -1311,208 +1311,90 @@
|
|
|
1311
1311
|
"values": []
|
|
1312
1312
|
},
|
|
1313
1313
|
{
|
|
1314
|
-
"name": "sync",
|
|
1315
|
-
"description": "Syncs the popup width or height to that of the trigger element.",
|
|
1316
|
-
"values": [
|
|
1317
|
-
{ "name": "width" },
|
|
1318
|
-
{ "name": "height" },
|
|
1319
|
-
{ "name": "both" }
|
|
1320
|
-
]
|
|
1321
|
-
}
|
|
1322
|
-
],
|
|
1323
|
-
"references": []
|
|
1324
|
-
},
|
|
1325
|
-
{
|
|
1326
|
-
"name": "flow-ui-form-group",
|
|
1327
|
-
"description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
|
|
1328
|
-
"attributes": [
|
|
1329
|
-
{
|
|
1330
|
-
"name": "label",
|
|
1331
|
-
"description": "The form group's label. If you need to display HTML, use the `label` slot instead.",
|
|
1332
|
-
"values": []
|
|
1333
|
-
},
|
|
1334
|
-
{
|
|
1335
|
-
"name": "size",
|
|
1336
|
-
"description": "The form group's size. Child form control will automatically be set to the selected size.",
|
|
1337
|
-
"values": [
|
|
1338
|
-
{ "name": "small" },
|
|
1339
|
-
{ "name": "medium" },
|
|
1340
|
-
{ "name": "large" }
|
|
1341
|
-
]
|
|
1342
|
-
},
|
|
1343
|
-
{
|
|
1344
|
-
"name": "help-text",
|
|
1345
|
-
"description": "The form groups's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
1346
|
-
"values": []
|
|
1347
|
-
},
|
|
1348
|
-
{
|
|
1349
|
-
"name": "borders",
|
|
1350
|
-
"description": "Set to `true` to display form group borders.",
|
|
1351
|
-
"values": []
|
|
1352
|
-
},
|
|
1353
|
-
{
|
|
1354
|
-
"name": "variant",
|
|
1355
|
-
"description": "The form group's theme variant.",
|
|
1356
|
-
"values": [
|
|
1357
|
-
{ "name": "default" },
|
|
1358
|
-
{ "name": "warning" },
|
|
1359
|
-
{ "name": "danger" }
|
|
1360
|
-
]
|
|
1361
|
-
}
|
|
1362
|
-
],
|
|
1363
|
-
"references": []
|
|
1364
|
-
},
|
|
1365
|
-
{
|
|
1366
|
-
"name": "flow-ui-gauge",
|
|
1367
|
-
"description": "Gauges are used to display a single value with an optional icon and heading.\n\n\n---\n\n\n\n\n### **Slots:**\n - **title** - The gauge's title. Alternatively, you can use the `title` attribute.\n- **value** - The gauge's value. Alternatively, you can use the `value` attribute.\n- **unit** - Alternatively, you can use the `unit` attribute.\n- **info** - The content to display in the gauge's info dialog. If this is set then an info button will be displayed in the gauge's header.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The gauge's header.\n- **header-icon** - The icon in the gauge's header.\n- **title** - The title text in the gauge's header.\n- **info-button** - The info button in the gauge's header (if info dialog configured).",
|
|
1368
|
-
"attributes": [
|
|
1369
|
-
{
|
|
1370
|
-
"name": "title",
|
|
1371
|
-
"description": "The gauge title displayed in the header. Alternatively, use the `title` slot to enhance the label with HTML markup.",
|
|
1372
|
-
"values": []
|
|
1373
|
-
},
|
|
1374
|
-
{
|
|
1375
|
-
"name": "units",
|
|
1376
|
-
"description": "The units of the gauge value.",
|
|
1377
|
-
"values": []
|
|
1378
|
-
},
|
|
1379
|
-
{
|
|
1380
|
-
"name": "value",
|
|
1381
|
-
"description": "The value to display in the gauge.",
|
|
1382
|
-
"values": []
|
|
1383
|
-
},
|
|
1384
|
-
{
|
|
1385
|
-
"name": "icon",
|
|
1386
|
-
"description": "The icon to display in the gauge header.",
|
|
1387
|
-
"values": []
|
|
1388
|
-
},
|
|
1389
|
-
{
|
|
1390
|
-
"name": "icon-library",
|
|
1391
|
-
"description": "The icon library to use for the icon. Uses default library if not specified.",
|
|
1392
|
-
"values": []
|
|
1393
|
-
},
|
|
1394
|
-
{
|
|
1395
|
-
"name": "format",
|
|
1396
|
-
"description": "The [D3 format](https://d3js.org/d3-format#locale_format) to use when displaying numeric values.",
|
|
1397
|
-
"values": []
|
|
1398
|
-
}
|
|
1399
|
-
],
|
|
1400
|
-
"references": []
|
|
1401
|
-
},
|
|
1402
|
-
{
|
|
1403
|
-
"name": "flow-ui-icon",
|
|
1404
|
-
"description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-load** - Emitted when the icon has loaded.\n- **flow-ui-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
|
|
1405
|
-
"attributes": [
|
|
1406
|
-
{
|
|
1407
|
-
"name": "name",
|
|
1408
|
-
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1409
|
-
"values": []
|
|
1410
|
-
},
|
|
1411
|
-
{
|
|
1412
|
-
"name": "src",
|
|
1413
|
-
"description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
|
|
1414
|
-
"values": []
|
|
1415
|
-
},
|
|
1416
|
-
{
|
|
1417
|
-
"name": "label",
|
|
1418
|
-
"description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
|
|
1419
|
-
"values": []
|
|
1420
|
-
},
|
|
1421
|
-
{
|
|
1422
|
-
"name": "library",
|
|
1423
|
-
"description": "The name of a registered custom icon library.",
|
|
1424
|
-
"values": []
|
|
1314
|
+
"name": "sync",
|
|
1315
|
+
"description": "Syncs the popup width or height to that of the trigger element.",
|
|
1316
|
+
"values": [
|
|
1317
|
+
{ "name": "width" },
|
|
1318
|
+
{ "name": "height" },
|
|
1319
|
+
{ "name": "both" }
|
|
1320
|
+
]
|
|
1425
1321
|
}
|
|
1426
1322
|
],
|
|
1427
1323
|
"references": []
|
|
1428
1324
|
},
|
|
1429
1325
|
{
|
|
1430
|
-
"name": "flow-ui-
|
|
1431
|
-
"description": "
|
|
1326
|
+
"name": "flow-ui-gauge",
|
|
1327
|
+
"description": "Gauges are used to display a single value with an optional icon and heading.\n\n\n---\n\n\n\n\n### **Slots:**\n - **title** - The gauge's title. Alternatively, you can use the `title` attribute.\n- **value** - The gauge's value. Alternatively, you can use the `value` attribute.\n- **unit** - Alternatively, you can use the `unit` attribute.\n- **info** - The content to display in the gauge's info dialog. If this is set then an info button will be displayed in the gauge's header.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The gauge's header.\n- **header-icon** - The icon in the gauge's header.\n- **title** - The title text in the gauge's header.\n- **info-button** - The info button in the gauge's header (if info dialog configured).",
|
|
1432
1328
|
"attributes": [
|
|
1433
1329
|
{
|
|
1434
|
-
"name": "
|
|
1435
|
-
"description": "The
|
|
1330
|
+
"name": "title",
|
|
1331
|
+
"description": "The gauge title displayed in the header. Alternatively, use the `title` slot to enhance the label with HTML markup.",
|
|
1436
1332
|
"values": []
|
|
1437
1333
|
},
|
|
1438
1334
|
{
|
|
1439
|
-
"name": "
|
|
1440
|
-
"description": "The
|
|
1335
|
+
"name": "units",
|
|
1336
|
+
"description": "The units of the gauge value.",
|
|
1441
1337
|
"values": []
|
|
1442
1338
|
},
|
|
1443
1339
|
{
|
|
1444
|
-
"name": "
|
|
1445
|
-
"description": "
|
|
1340
|
+
"name": "value",
|
|
1341
|
+
"description": "The value to display in the gauge.",
|
|
1446
1342
|
"values": []
|
|
1447
1343
|
},
|
|
1448
1344
|
{
|
|
1449
|
-
"name": "
|
|
1450
|
-
"description": "
|
|
1345
|
+
"name": "icon",
|
|
1346
|
+
"description": "The icon to display in the gauge header.",
|
|
1451
1347
|
"values": []
|
|
1452
1348
|
},
|
|
1453
1349
|
{
|
|
1454
|
-
"name": "
|
|
1455
|
-
"description": "
|
|
1456
|
-
"values": [
|
|
1457
|
-
{ "name": "_blank" },
|
|
1458
|
-
{ "name": "_parent" },
|
|
1459
|
-
{ "name": "_self" },
|
|
1460
|
-
{ "name": "_top" }
|
|
1461
|
-
]
|
|
1462
|
-
},
|
|
1463
|
-
{
|
|
1464
|
-
"name": "download",
|
|
1465
|
-
"description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
|
|
1350
|
+
"name": "icon-library",
|
|
1351
|
+
"description": "The icon library to use for the icon. Uses default library if not specified.",
|
|
1466
1352
|
"values": []
|
|
1467
1353
|
},
|
|
1468
1354
|
{
|
|
1469
|
-
"name": "
|
|
1470
|
-
"description": "
|
|
1355
|
+
"name": "format",
|
|
1356
|
+
"description": "The [D3 format](https://d3js.org/d3-format#locale_format) to use when displaying numeric values.",
|
|
1471
1357
|
"values": []
|
|
1472
|
-
}
|
|
1358
|
+
}
|
|
1359
|
+
],
|
|
1360
|
+
"references": []
|
|
1361
|
+
},
|
|
1362
|
+
{
|
|
1363
|
+
"name": "flow-ui-form-group",
|
|
1364
|
+
"description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
|
|
1365
|
+
"attributes": [
|
|
1473
1366
|
{
|
|
1474
|
-
"name": "
|
|
1475
|
-
"description": "
|
|
1367
|
+
"name": "label",
|
|
1368
|
+
"description": "The form group's label. If you need to display HTML, use the `label` slot instead.",
|
|
1476
1369
|
"values": []
|
|
1477
1370
|
},
|
|
1478
1371
|
{
|
|
1479
|
-
"name": "
|
|
1480
|
-
"description": "The
|
|
1372
|
+
"name": "size",
|
|
1373
|
+
"description": "The form group's size. Child form control will automatically be set to the selected size.",
|
|
1481
1374
|
"values": [
|
|
1482
|
-
{ "name": "" },
|
|
1483
|
-
{ "name": "
|
|
1484
|
-
{ "name": "
|
|
1485
|
-
{ "name": "top-end" },
|
|
1486
|
-
{ "name": "right" },
|
|
1487
|
-
{ "name": "right-start" },
|
|
1488
|
-
{ "name": "right-end" },
|
|
1489
|
-
{ "name": "bottom" },
|
|
1490
|
-
{ "name": "bottom-start" },
|
|
1491
|
-
{ "name": "bottom-end" },
|
|
1492
|
-
{ "name": "left" },
|
|
1493
|
-
{ "name": "left-start" },
|
|
1494
|
-
{ "name": "left-end" }
|
|
1375
|
+
{ "name": "small" },
|
|
1376
|
+
{ "name": "medium" },
|
|
1377
|
+
{ "name": "large" }
|
|
1495
1378
|
]
|
|
1496
1379
|
},
|
|
1497
1380
|
{
|
|
1498
|
-
"name": "
|
|
1499
|
-
"description": "The
|
|
1500
|
-
"values": []
|
|
1501
|
-
},
|
|
1502
|
-
{
|
|
1503
|
-
"name": "tooltip-skidding",
|
|
1504
|
-
"description": "The distance in pixels from which to offset the tooltip along the icon button.",
|
|
1381
|
+
"name": "help-text",
|
|
1382
|
+
"description": "The form groups's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
1505
1383
|
"values": []
|
|
1506
1384
|
},
|
|
1507
1385
|
{
|
|
1508
|
-
"name": "
|
|
1509
|
-
"description": "
|
|
1386
|
+
"name": "borders",
|
|
1387
|
+
"description": "Set to `true` to display form group borders.",
|
|
1510
1388
|
"values": []
|
|
1511
1389
|
},
|
|
1512
1390
|
{
|
|
1513
|
-
"name": "
|
|
1514
|
-
"description": "
|
|
1515
|
-
"values": [
|
|
1391
|
+
"name": "variant",
|
|
1392
|
+
"description": "The form group's theme variant.",
|
|
1393
|
+
"values": [
|
|
1394
|
+
{ "name": "default" },
|
|
1395
|
+
{ "name": "warning" },
|
|
1396
|
+
{ "name": "danger" }
|
|
1397
|
+
]
|
|
1516
1398
|
}
|
|
1517
1399
|
],
|
|
1518
1400
|
"references": []
|
|
@@ -1729,6 +1611,124 @@
|
|
|
1729
1611
|
],
|
|
1730
1612
|
"references": []
|
|
1731
1613
|
},
|
|
1614
|
+
{
|
|
1615
|
+
"name": "flow-ui-icon",
|
|
1616
|
+
"description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-load** - Emitted when the icon has loaded.\n- **flow-ui-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
|
|
1617
|
+
"attributes": [
|
|
1618
|
+
{
|
|
1619
|
+
"name": "name",
|
|
1620
|
+
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1621
|
+
"values": []
|
|
1622
|
+
},
|
|
1623
|
+
{
|
|
1624
|
+
"name": "src",
|
|
1625
|
+
"description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
|
|
1626
|
+
"values": []
|
|
1627
|
+
},
|
|
1628
|
+
{
|
|
1629
|
+
"name": "label",
|
|
1630
|
+
"description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
|
|
1631
|
+
"values": []
|
|
1632
|
+
},
|
|
1633
|
+
{
|
|
1634
|
+
"name": "library",
|
|
1635
|
+
"description": "The name of a registered custom icon library.",
|
|
1636
|
+
"values": []
|
|
1637
|
+
}
|
|
1638
|
+
],
|
|
1639
|
+
"references": []
|
|
1640
|
+
},
|
|
1641
|
+
{
|
|
1642
|
+
"name": "flow-ui-icon-button",
|
|
1643
|
+
"description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the icon button loses focus.\n- **flow-ui-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n- **hideConfirm()** - Hide the confirmation tooltip if it is showing\n- **showConfirm()** - Show the confirmation tooltip\n\n### **Slots:**\n - **tooltip** - The tooltip content to display when the user hovers over the icon button. Alternatively, you can use the `tooltip` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
1644
|
+
"attributes": [
|
|
1645
|
+
{
|
|
1646
|
+
"name": "name",
|
|
1647
|
+
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1648
|
+
"values": []
|
|
1649
|
+
},
|
|
1650
|
+
{
|
|
1651
|
+
"name": "library",
|
|
1652
|
+
"description": "The name of a registered custom icon library.",
|
|
1653
|
+
"values": []
|
|
1654
|
+
},
|
|
1655
|
+
{
|
|
1656
|
+
"name": "src",
|
|
1657
|
+
"description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
|
|
1658
|
+
"values": []
|
|
1659
|
+
},
|
|
1660
|
+
{
|
|
1661
|
+
"name": "href",
|
|
1662
|
+
"description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
|
|
1663
|
+
"values": []
|
|
1664
|
+
},
|
|
1665
|
+
{
|
|
1666
|
+
"name": "target",
|
|
1667
|
+
"description": "Tells the browser where to open the link. Only used when `href` is set.",
|
|
1668
|
+
"values": [
|
|
1669
|
+
{ "name": "_blank" },
|
|
1670
|
+
{ "name": "_parent" },
|
|
1671
|
+
{ "name": "_self" },
|
|
1672
|
+
{ "name": "_top" }
|
|
1673
|
+
]
|
|
1674
|
+
},
|
|
1675
|
+
{
|
|
1676
|
+
"name": "download",
|
|
1677
|
+
"description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
|
|
1678
|
+
"values": []
|
|
1679
|
+
},
|
|
1680
|
+
{
|
|
1681
|
+
"name": "label",
|
|
1682
|
+
"description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
|
|
1683
|
+
"values": []
|
|
1684
|
+
},
|
|
1685
|
+
{
|
|
1686
|
+
"name": "tooltip",
|
|
1687
|
+
"description": "Tooltip text that gets displayed when the user hovers over the icon button. If you need to display HTML, use the\n`tooltip` slot instead.",
|
|
1688
|
+
"values": []
|
|
1689
|
+
},
|
|
1690
|
+
{
|
|
1691
|
+
"name": "tooltip-placement",
|
|
1692
|
+
"description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
|
|
1693
|
+
"values": [
|
|
1694
|
+
{ "name": "" },
|
|
1695
|
+
{ "name": "top" },
|
|
1696
|
+
{ "name": "top-start" },
|
|
1697
|
+
{ "name": "top-end" },
|
|
1698
|
+
{ "name": "right" },
|
|
1699
|
+
{ "name": "right-start" },
|
|
1700
|
+
{ "name": "right-end" },
|
|
1701
|
+
{ "name": "bottom" },
|
|
1702
|
+
{ "name": "bottom-start" },
|
|
1703
|
+
{ "name": "bottom-end" },
|
|
1704
|
+
{ "name": "left" },
|
|
1705
|
+
{ "name": "left-start" },
|
|
1706
|
+
{ "name": "left-end" }
|
|
1707
|
+
]
|
|
1708
|
+
},
|
|
1709
|
+
{
|
|
1710
|
+
"name": "tooltip-distance",
|
|
1711
|
+
"description": "The distance in pixels from which to offset the tooltip away from the icon button.",
|
|
1712
|
+
"values": []
|
|
1713
|
+
},
|
|
1714
|
+
{
|
|
1715
|
+
"name": "tooltip-skidding",
|
|
1716
|
+
"description": "The distance in pixels from which to offset the tooltip along the icon button.",
|
|
1717
|
+
"values": []
|
|
1718
|
+
},
|
|
1719
|
+
{
|
|
1720
|
+
"name": "disabled",
|
|
1721
|
+
"description": "Disables the button.",
|
|
1722
|
+
"values": []
|
|
1723
|
+
},
|
|
1724
|
+
{
|
|
1725
|
+
"name": "confirm",
|
|
1726
|
+
"description": "Confirmation text that gets displayed in a tooltip when the user clicks the icon button.\n If you need to display HTML, use the `confirm` slot instead.",
|
|
1727
|
+
"values": []
|
|
1728
|
+
}
|
|
1729
|
+
],
|
|
1730
|
+
"references": []
|
|
1731
|
+
},
|
|
1732
1732
|
{
|
|
1733
1733
|
"name": "flow-ui-list",
|
|
1734
1734
|
"description": "A list of items that can be edited and reordered.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when a list item is renamed **or** a list item is selected (selectable lists only).\n- **flow-ui-input** - Emitted when a list item is selected (selectable lists only).\n- **flow-ui-remove** - Emitted when a list item is removed.\n- **flow-ui-drag-start** - Emitted when the user starts dragging to reorder list items.\n- **flow-ui-drag-drop** - Emitted when the user drops a list item to reorder it.\n- **flow-ui-drag-end** - Emitted when the drag-drop operation has finished or been cancelled.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -1894,12 +1894,6 @@
|
|
|
1894
1894
|
],
|
|
1895
1895
|
"references": []
|
|
1896
1896
|
},
|
|
1897
|
-
{
|
|
1898
|
-
"name": "flow-ui-menu-label",
|
|
1899
|
-
"description": "Menu labels are used to describe a group of menu items.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
1900
|
-
"attributes": [],
|
|
1901
|
-
"references": []
|
|
1902
|
-
},
|
|
1903
1897
|
{
|
|
1904
1898
|
"name": "flow-ui-mutation-observer",
|
|
1905
1899
|
"description": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-mutation** - Emitted when a mutation occurs.\n\n### **Slots:**\n - _default_ - The content to watch for mutations.",
|
|
@@ -1937,6 +1931,12 @@
|
|
|
1937
1931
|
],
|
|
1938
1932
|
"references": []
|
|
1939
1933
|
},
|
|
1934
|
+
{
|
|
1935
|
+
"name": "flow-ui-menu-label",
|
|
1936
|
+
"description": "Menu labels are used to describe a group of menu items.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
1937
|
+
"attributes": [],
|
|
1938
|
+
"references": []
|
|
1939
|
+
},
|
|
1940
1940
|
{
|
|
1941
1941
|
"name": "flow-ui-option",
|
|
1942
1942
|
"description": "Options define the selectable items within various form controls such as [select](/components/select).\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, a `<flow-ui-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
|
|
@@ -2139,55 +2139,21 @@
|
|
|
2139
2139
|
"values": [{ "name": "Element" }, { "name": "Element[]" }]
|
|
2140
2140
|
},
|
|
2141
2141
|
{
|
|
2142
|
-
"name": "auto-size-padding",
|
|
2143
|
-
"description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
|
|
2144
|
-
"values": []
|
|
2145
|
-
},
|
|
2146
|
-
{
|
|
2147
|
-
"name": "hover-bridge",
|
|
2148
|
-
"description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
|
|
2149
|
-
"values": []
|
|
2150
|
-
}
|
|
2151
|
-
],
|
|
2152
|
-
"references": []
|
|
2153
|
-
},
|
|
2154
|
-
{
|
|
2155
|
-
"name": "flow-ui-progress-bar",
|
|
2156
|
-
"description": "Progress bars are used to show the status of an ongoing operation.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--track-height** - The progress bar's thickness (same as the indicator's thickness). _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
|
|
2157
|
-
"attributes": [
|
|
2158
|
-
{
|
|
2159
|
-
"name": "label",
|
|
2160
|
-
"description": "A custom label for assistive devices.",
|
|
2161
|
-
"values": []
|
|
2162
|
-
},
|
|
2163
|
-
{
|
|
2164
|
-
"name": "value",
|
|
2165
|
-
"description": "The current progress as a percentage, 0 to 100.",
|
|
2142
|
+
"name": "auto-size-padding",
|
|
2143
|
+
"description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
|
|
2166
2144
|
"values": []
|
|
2167
2145
|
},
|
|
2168
2146
|
{
|
|
2169
|
-
"name": "
|
|
2170
|
-
"description": "When
|
|
2147
|
+
"name": "hover-bridge",
|
|
2148
|
+
"description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
|
|
2171
2149
|
"values": []
|
|
2172
|
-
},
|
|
2173
|
-
{
|
|
2174
|
-
"name": "variant",
|
|
2175
|
-
"description": "The progress bar's theme variant",
|
|
2176
|
-
"values": [
|
|
2177
|
-
{ "name": "primary" },
|
|
2178
|
-
{ "name": "secondary" },
|
|
2179
|
-
{ "name": "success" },
|
|
2180
|
-
{ "name": "neutral" },
|
|
2181
|
-
{ "name": "warning" },
|
|
2182
|
-
{ "name": "danger" }
|
|
2183
|
-
]
|
|
2184
2150
|
}
|
|
2185
2151
|
],
|
|
2186
2152
|
"references": []
|
|
2187
2153
|
},
|
|
2188
2154
|
{
|
|
2189
|
-
"name": "flow-ui-progress-
|
|
2190
|
-
"description": "Progress
|
|
2155
|
+
"name": "flow-ui-progress-bar",
|
|
2156
|
+
"description": "Progress bars are used to show the status of an ongoing operation.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--track-height** - The progress bar's thickness (same as the indicator's thickness). _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
|
|
2191
2157
|
"attributes": [
|
|
2192
2158
|
{
|
|
2193
2159
|
"name": "label",
|
|
@@ -2201,12 +2167,12 @@
|
|
|
2201
2167
|
},
|
|
2202
2168
|
{
|
|
2203
2169
|
"name": "indeterminate",
|
|
2204
|
-
"description": "
|
|
2170
|
+
"description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
|
|
2205
2171
|
"values": []
|
|
2206
2172
|
},
|
|
2207
2173
|
{
|
|
2208
2174
|
"name": "variant",
|
|
2209
|
-
"description": "The progress
|
|
2175
|
+
"description": "The progress bar's theme variant",
|
|
2210
2176
|
"values": [
|
|
2211
2177
|
{ "name": "primary" },
|
|
2212
2178
|
{ "name": "secondary" },
|
|
@@ -2215,15 +2181,6 @@
|
|
|
2215
2181
|
{ "name": "warning" },
|
|
2216
2182
|
{ "name": "danger" }
|
|
2217
2183
|
]
|
|
2218
|
-
},
|
|
2219
|
-
{
|
|
2220
|
-
"name": "size",
|
|
2221
|
-
"description": "The progress ring's size",
|
|
2222
|
-
"values": [
|
|
2223
|
-
{ "name": "small" },
|
|
2224
|
-
{ "name": "medium" },
|
|
2225
|
-
{ "name": "large" }
|
|
2226
|
-
]
|
|
2227
2184
|
}
|
|
2228
2185
|
],
|
|
2229
2186
|
"references": []
|
|
@@ -2313,112 +2270,84 @@
|
|
|
2313
2270
|
"references": []
|
|
2314
2271
|
},
|
|
2315
2272
|
{
|
|
2316
|
-
"name": "flow-ui-
|
|
2317
|
-
"description": "
|
|
2273
|
+
"name": "flow-ui-progress-ring",
|
|
2274
|
+
"description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n\n\n---\n\n\n\n\n### **Slots:**\n - **label** - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
|
|
2318
2275
|
"attributes": [
|
|
2319
2276
|
{
|
|
2320
2277
|
"name": "label",
|
|
2321
|
-
"description": "
|
|
2278
|
+
"description": "A custom label for assistive devices.",
|
|
2322
2279
|
"values": []
|
|
2323
2280
|
},
|
|
2324
2281
|
{
|
|
2325
|
-
"name": "
|
|
2326
|
-
"description": "The
|
|
2282
|
+
"name": "value",
|
|
2283
|
+
"description": "The current progress as a percentage, 0 to 100.",
|
|
2327
2284
|
"values": []
|
|
2328
2285
|
},
|
|
2329
2286
|
{
|
|
2330
|
-
"name": "
|
|
2331
|
-
"description": "
|
|
2287
|
+
"name": "indeterminate",
|
|
2288
|
+
"description": "If the progress animation is indeterminate",
|
|
2332
2289
|
"values": []
|
|
2333
2290
|
},
|
|
2334
2291
|
{
|
|
2335
|
-
"name": "
|
|
2336
|
-
"description": "The
|
|
2337
|
-
"values": [
|
|
2292
|
+
"name": "variant",
|
|
2293
|
+
"description": "The progress ring's theme variant",
|
|
2294
|
+
"values": [
|
|
2295
|
+
{ "name": "primary" },
|
|
2296
|
+
{ "name": "secondary" },
|
|
2297
|
+
{ "name": "success" },
|
|
2298
|
+
{ "name": "neutral" },
|
|
2299
|
+
{ "name": "warning" },
|
|
2300
|
+
{ "name": "danger" }
|
|
2301
|
+
]
|
|
2338
2302
|
},
|
|
2339
2303
|
{
|
|
2340
2304
|
"name": "size",
|
|
2341
|
-
"description": "The
|
|
2305
|
+
"description": "The progress ring's size",
|
|
2342
2306
|
"values": [
|
|
2343
2307
|
{ "name": "small" },
|
|
2344
2308
|
{ "name": "medium" },
|
|
2345
2309
|
{ "name": "large" }
|
|
2346
2310
|
]
|
|
2347
|
-
},
|
|
2348
|
-
{
|
|
2349
|
-
"name": "reverse",
|
|
2350
|
-
"description": "Display the radios using a reversed style with left-aligned labels.",
|
|
2351
|
-
"values": []
|
|
2352
|
-
},
|
|
2353
|
-
{
|
|
2354
|
-
"name": "form",
|
|
2355
|
-
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
2356
|
-
"values": []
|
|
2357
|
-
},
|
|
2358
|
-
{
|
|
2359
|
-
"name": "required",
|
|
2360
|
-
"description": "Ensures a child radio is checked before allowing the containing form to submit.",
|
|
2361
|
-
"values": []
|
|
2362
2311
|
}
|
|
2363
2312
|
],
|
|
2364
2313
|
"references": []
|
|
2365
2314
|
},
|
|
2366
2315
|
{
|
|
2367
|
-
"name": "flow-ui-
|
|
2368
|
-
"description": "
|
|
2316
|
+
"name": "flow-ui-radio-group",
|
|
2317
|
+
"description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the radio group's selected value changes.\n- **flow-ui-input** - Emitted when the radio group receives user input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
|
|
2369
2318
|
"attributes": [
|
|
2370
|
-
{
|
|
2371
|
-
"name": "name",
|
|
2372
|
-
"description": "The name of the range, submitted as a name/value pair with form data.",
|
|
2373
|
-
"values": []
|
|
2374
|
-
},
|
|
2375
|
-
{
|
|
2376
|
-
"name": "value",
|
|
2377
|
-
"description": "The current value of the range, submitted as a name/value pair with form data.",
|
|
2378
|
-
"values": []
|
|
2379
|
-
},
|
|
2380
|
-
{
|
|
2381
|
-
"name": "size",
|
|
2382
|
-
"description": "The input's size.",
|
|
2383
|
-
"values": [
|
|
2384
|
-
{ "name": "small" },
|
|
2385
|
-
{ "name": "medium" },
|
|
2386
|
-
{ "name": "large" }
|
|
2387
|
-
]
|
|
2388
|
-
},
|
|
2389
2319
|
{
|
|
2390
2320
|
"name": "label",
|
|
2391
|
-
"description": "The
|
|
2321
|
+
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
2392
2322
|
"values": []
|
|
2393
2323
|
},
|
|
2394
2324
|
{
|
|
2395
2325
|
"name": "help-text",
|
|
2396
|
-
"description": "The
|
|
2397
|
-
"values": []
|
|
2398
|
-
},
|
|
2399
|
-
{
|
|
2400
|
-
"name": "disabled",
|
|
2401
|
-
"description": "Disables the range.",
|
|
2326
|
+
"description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2402
2327
|
"values": []
|
|
2403
2328
|
},
|
|
2404
2329
|
{
|
|
2405
|
-
"name": "
|
|
2406
|
-
"description": "The
|
|
2330
|
+
"name": "name",
|
|
2331
|
+
"description": "The name of the radio group, submitted as a name/value pair with form data.",
|
|
2407
2332
|
"values": []
|
|
2408
2333
|
},
|
|
2409
2334
|
{
|
|
2410
|
-
"name": "
|
|
2411
|
-
"description": "The
|
|
2335
|
+
"name": "value",
|
|
2336
|
+
"description": "The current value of the radio group, submitted as a name/value pair with form data.",
|
|
2412
2337
|
"values": []
|
|
2413
2338
|
},
|
|
2414
2339
|
{
|
|
2415
|
-
"name": "
|
|
2416
|
-
"description": "The
|
|
2417
|
-
"values": [
|
|
2340
|
+
"name": "size",
|
|
2341
|
+
"description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
|
|
2342
|
+
"values": [
|
|
2343
|
+
{ "name": "small" },
|
|
2344
|
+
{ "name": "medium" },
|
|
2345
|
+
{ "name": "large" }
|
|
2346
|
+
]
|
|
2418
2347
|
},
|
|
2419
2348
|
{
|
|
2420
|
-
"name": "
|
|
2421
|
-
"description": "
|
|
2349
|
+
"name": "reverse",
|
|
2350
|
+
"description": "Display the radios using a reversed style with left-aligned labels.",
|
|
2422
2351
|
"values": []
|
|
2423
2352
|
},
|
|
2424
2353
|
{
|
|
@@ -2427,11 +2356,10 @@
|
|
|
2427
2356
|
"values": []
|
|
2428
2357
|
},
|
|
2429
2358
|
{
|
|
2430
|
-
"name": "
|
|
2431
|
-
"description": "
|
|
2359
|
+
"name": "required",
|
|
2360
|
+
"description": "Ensures a child radio is checked before allowing the containing form to submit.",
|
|
2432
2361
|
"values": []
|
|
2433
|
-
}
|
|
2434
|
-
{ "name": "no-input", "values": [] }
|
|
2362
|
+
}
|
|
2435
2363
|
],
|
|
2436
2364
|
"references": []
|
|
2437
2365
|
},
|
|
@@ -2558,39 +2486,94 @@
|
|
|
2558
2486
|
"references": []
|
|
2559
2487
|
},
|
|
2560
2488
|
{
|
|
2561
|
-
"name": "flow-ui-
|
|
2562
|
-
"description": "
|
|
2489
|
+
"name": "flow-ui-range",
|
|
2490
|
+
"description": "Ranges allow the user to select a single value within a given range using a slider.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when an alteration to the control's value is committed by the user.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the range.\n- **blur()** - Removes focus from the range.\n- **stepUp()** - Increments the value of the range by the value of the step attribute.\n- **stepDown()** - Decrements the value of the range by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--thumb-size** - The size of the thumb. _(default: undefined)_\n- **--track-color-active** - The color of the portion of the track that represents the current value. _(default: undefined)_\n- **--track-color-inactive** - The of the portion of the track that represents the remaining value. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The point of origin of the active track. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The range's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **number-input** - The range's number input control.",
|
|
2563
2491
|
"attributes": [
|
|
2564
2492
|
{
|
|
2565
|
-
"name": "
|
|
2566
|
-
"description": "
|
|
2493
|
+
"name": "name",
|
|
2494
|
+
"description": "The name of the range, submitted as a name/value pair with form data.",
|
|
2567
2495
|
"values": []
|
|
2568
2496
|
},
|
|
2569
2497
|
{
|
|
2570
|
-
"name": "
|
|
2571
|
-
"description": "The
|
|
2572
|
-
"values": [
|
|
2498
|
+
"name": "value",
|
|
2499
|
+
"description": "The current value of the range, submitted as a name/value pair with form data.",
|
|
2500
|
+
"values": []
|
|
2573
2501
|
},
|
|
2574
2502
|
{
|
|
2575
|
-
"name": "
|
|
2576
|
-
"description": "
|
|
2503
|
+
"name": "size",
|
|
2504
|
+
"description": "The input's size.",
|
|
2505
|
+
"values": [
|
|
2506
|
+
{ "name": "small" },
|
|
2507
|
+
{ "name": "medium" },
|
|
2508
|
+
{ "name": "large" }
|
|
2509
|
+
]
|
|
2510
|
+
},
|
|
2511
|
+
{
|
|
2512
|
+
"name": "label",
|
|
2513
|
+
"description": "The range's label. If you need to display HTML, use the `label` slot instead.",
|
|
2577
2514
|
"values": []
|
|
2578
|
-
}
|
|
2515
|
+
},
|
|
2516
|
+
{
|
|
2517
|
+
"name": "help-text",
|
|
2518
|
+
"description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
|
|
2519
|
+
"values": []
|
|
2520
|
+
},
|
|
2521
|
+
{
|
|
2522
|
+
"name": "disabled",
|
|
2523
|
+
"description": "Disables the range.",
|
|
2524
|
+
"values": []
|
|
2525
|
+
},
|
|
2526
|
+
{
|
|
2527
|
+
"name": "min",
|
|
2528
|
+
"description": "The minimum acceptable value of the range.",
|
|
2529
|
+
"values": []
|
|
2530
|
+
},
|
|
2531
|
+
{
|
|
2532
|
+
"name": "max",
|
|
2533
|
+
"description": "The maximum acceptable value of the range.",
|
|
2534
|
+
"values": []
|
|
2535
|
+
},
|
|
2536
|
+
{
|
|
2537
|
+
"name": "step",
|
|
2538
|
+
"description": "The interval at which the range will increase and decrease.",
|
|
2539
|
+
"values": []
|
|
2540
|
+
},
|
|
2541
|
+
{
|
|
2542
|
+
"name": "format",
|
|
2543
|
+
"description": "Number format to use for numeric display. (D3 format string)",
|
|
2544
|
+
"values": []
|
|
2545
|
+
},
|
|
2546
|
+
{
|
|
2547
|
+
"name": "form",
|
|
2548
|
+
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
2549
|
+
"values": []
|
|
2550
|
+
},
|
|
2551
|
+
{
|
|
2552
|
+
"name": "inline",
|
|
2553
|
+
"description": "Display the control in the 'inline' form control style.",
|
|
2554
|
+
"values": []
|
|
2555
|
+
},
|
|
2556
|
+
{ "name": "no-input", "values": [] }
|
|
2579
2557
|
],
|
|
2580
2558
|
"references": []
|
|
2581
2559
|
},
|
|
2582
2560
|
{
|
|
2583
|
-
"name": "flow-ui-split-view
|
|
2584
|
-
"description": "Split-
|
|
2561
|
+
"name": "flow-ui-split-view",
|
|
2562
|
+
"description": "Split-views contain two or more split-view panes to create resizable areas.\n\n\n---\n\n\n",
|
|
2585
2563
|
"attributes": [
|
|
2586
2564
|
{
|
|
2587
|
-
"name": "
|
|
2588
|
-
"description": "
|
|
2565
|
+
"name": "no-drag-close",
|
|
2566
|
+
"description": "Disable drag-to-close behaviour.",
|
|
2589
2567
|
"values": []
|
|
2590
2568
|
},
|
|
2569
|
+
{
|
|
2570
|
+
"name": "positions",
|
|
2571
|
+
"description": "The pane positions in CSS size units",
|
|
2572
|
+
"values": [{ "name": "string[]" }]
|
|
2573
|
+
},
|
|
2591
2574
|
{
|
|
2592
2575
|
"name": "vertical",
|
|
2593
|
-
"description": "
|
|
2576
|
+
"description": "Set to `true` for vertically-arranged panes. By default, panes are layed out horizontally.",
|
|
2594
2577
|
"values": []
|
|
2595
2578
|
}
|
|
2596
2579
|
],
|
|
@@ -2643,6 +2626,23 @@
|
|
|
2643
2626
|
],
|
|
2644
2627
|
"references": []
|
|
2645
2628
|
},
|
|
2629
|
+
{
|
|
2630
|
+
"name": "flow-ui-split-view-divider",
|
|
2631
|
+
"description": "Split-view dividers are used internally by split-views to create resizable areas.\n\n\n---\n\n\n",
|
|
2632
|
+
"attributes": [
|
|
2633
|
+
{
|
|
2634
|
+
"name": "disabled",
|
|
2635
|
+
"description": "Disables user interaction with the split pane divider.",
|
|
2636
|
+
"values": []
|
|
2637
|
+
},
|
|
2638
|
+
{
|
|
2639
|
+
"name": "vertical",
|
|
2640
|
+
"description": "Draws the divider for vertically-arranged panes",
|
|
2641
|
+
"values": []
|
|
2642
|
+
}
|
|
2643
|
+
],
|
|
2644
|
+
"references": []
|
|
2645
|
+
},
|
|
2646
2646
|
{
|
|
2647
2647
|
"name": "flow-ui-split-view-toggle-button",
|
|
2648
2648
|
"description": "Use a split panel toggle button to control a parent panel's open/closed state\n\n\n---\n\n\n",
|
|
@@ -2665,12 +2665,6 @@
|
|
|
2665
2665
|
],
|
|
2666
2666
|
"references": []
|
|
2667
2667
|
},
|
|
2668
|
-
{
|
|
2669
|
-
"name": "flow-ui-stepper",
|
|
2670
|
-
"description": "Steppers are used to guide users through a series of steps in a wizard-like UI.\n\n\n---\n\n\n\n\n### **Methods:**\n - **setComplete(panelName: _string_, complete: _boolean_)** - Mark the specified panel as `complete`",
|
|
2671
|
-
"attributes": [],
|
|
2672
|
-
"references": []
|
|
2673
|
-
},
|
|
2674
2668
|
{
|
|
2675
2669
|
"name": "flow-ui-stepper-panel",
|
|
2676
2670
|
"description": "Stepper panels provide a single page in a stepper to guide users through a series of steps.\n\n\n---\n\n\n",
|
|
@@ -2754,6 +2748,12 @@
|
|
|
2754
2748
|
],
|
|
2755
2749
|
"references": []
|
|
2756
2750
|
},
|
|
2751
|
+
{
|
|
2752
|
+
"name": "flow-ui-stepper",
|
|
2753
|
+
"description": "Steppers are used to guide users through a series of steps in a wizard-like UI.\n\n\n---\n\n\n\n\n### **Methods:**\n - **setComplete(panelName: _string_, complete: _boolean_)** - Mark the specified panel as `complete`",
|
|
2754
|
+
"attributes": [],
|
|
2755
|
+
"references": []
|
|
2756
|
+
},
|
|
2757
2757
|
{
|
|
2758
2758
|
"name": "flow-ui-tab",
|
|
2759
2759
|
"description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
|