@emuanalytics/flow-rdf-ui 4.1.13 → 4.1.14
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.
|
@@ -35,6 +35,80 @@
|
|
|
35
35
|
],
|
|
36
36
|
"references": []
|
|
37
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.",
|
|
41
|
+
"attributes": [
|
|
42
|
+
{
|
|
43
|
+
"name": "image",
|
|
44
|
+
"description": "The image source to use for the avatar.",
|
|
45
|
+
"values": []
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "label",
|
|
49
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
50
|
+
"values": []
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "initials",
|
|
54
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
55
|
+
"values": []
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "loading",
|
|
59
|
+
"description": "Indicates how the browser should load the image.",
|
|
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-badge",
|
|
76
|
+
"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.",
|
|
77
|
+
"attributes": [
|
|
78
|
+
{
|
|
79
|
+
"name": "variant",
|
|
80
|
+
"description": "The badge's theme variant.",
|
|
81
|
+
"values": [
|
|
82
|
+
{ "name": "primary" },
|
|
83
|
+
{ "name": "secondary" },
|
|
84
|
+
{ "name": "success" },
|
|
85
|
+
{ "name": "neutral" },
|
|
86
|
+
{ "name": "warning" },
|
|
87
|
+
{ "name": "danger" }
|
|
88
|
+
]
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "size",
|
|
92
|
+
"description": "The badge size.",
|
|
93
|
+
"values": [
|
|
94
|
+
{ "name": "small" },
|
|
95
|
+
{ "name": "medium" },
|
|
96
|
+
{ "name": "large" }
|
|
97
|
+
]
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "pill",
|
|
101
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
102
|
+
"values": []
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"name": "pulse",
|
|
106
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
107
|
+
"values": []
|
|
108
|
+
}
|
|
109
|
+
],
|
|
110
|
+
"references": []
|
|
111
|
+
},
|
|
38
112
|
{
|
|
39
113
|
"name": "flow-ui-autocomplete",
|
|
40
114
|
"description": "The Autocomplete is a Text input enhanced by a panel of suggested options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the display value changes.\n- **flow-ui-change** - Emitted when the input value changes.\n- **flow-ui-focus** - Emitted when the input is focused.\n- **flow-ui-blur** - Emitted when the input is blurred.\n- **flow-ui-show** - Emitted when the dropdown is shown.\n- **flow-ui-after-show** - Emitted when the dropdown is shown.\n- **flow-ui-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-after-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-invalid** - Emitted when the input is invalid.\n- **flow-ui-valid** - Emitted when the input is valid.\n- **flow-ui-validate** - Emitted when the input is validated.\n- **flow-ui-validate-complete** - Emitted when the input is validated and the validity state is updated.\n- **flow-ui-validate-error** - Emitted when the input is validated and an error occurs.\n- **flow-ui-validate-success** - Emitted when the input is validated and no errors occur.\n\n### **Methods:**\n - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus()** - Focuses on the control\n- **blur()** - Blurs from the control.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **getInputText()** - Gets the current value of the text input\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.\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 combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear 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 select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **clear-button** - The clear button.",
|
|
@@ -139,42 +213,6 @@
|
|
|
139
213
|
],
|
|
140
214
|
"references": []
|
|
141
215
|
},
|
|
142
|
-
{
|
|
143
|
-
"name": "flow-ui-avatar",
|
|
144
|
-
"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.",
|
|
145
|
-
"attributes": [
|
|
146
|
-
{
|
|
147
|
-
"name": "image",
|
|
148
|
-
"description": "The image source to use for the avatar.",
|
|
149
|
-
"values": []
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
"name": "label",
|
|
153
|
-
"description": "A label to use to describe the avatar to assistive devices.",
|
|
154
|
-
"values": []
|
|
155
|
-
},
|
|
156
|
-
{
|
|
157
|
-
"name": "initials",
|
|
158
|
-
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
159
|
-
"values": []
|
|
160
|
-
},
|
|
161
|
-
{
|
|
162
|
-
"name": "loading",
|
|
163
|
-
"description": "Indicates how the browser should load the image.",
|
|
164
|
-
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
165
|
-
},
|
|
166
|
-
{
|
|
167
|
-
"name": "shape",
|
|
168
|
-
"description": "The shape of the avatar.",
|
|
169
|
-
"values": [
|
|
170
|
-
{ "name": "circle" },
|
|
171
|
-
{ "name": "square" },
|
|
172
|
-
{ "name": "rounded" }
|
|
173
|
-
]
|
|
174
|
-
}
|
|
175
|
-
],
|
|
176
|
-
"references": []
|
|
177
|
-
},
|
|
178
216
|
{
|
|
179
217
|
"name": "flow-ui-animation",
|
|
180
218
|
"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.",
|
|
@@ -238,12 +276,52 @@
|
|
|
238
276
|
"references": []
|
|
239
277
|
},
|
|
240
278
|
{
|
|
241
|
-
"name": "flow-ui-
|
|
242
|
-
"description": "
|
|
279
|
+
"name": "flow-ui-breadcrumb",
|
|
280
|
+
"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.",
|
|
281
|
+
"attributes": [
|
|
282
|
+
{
|
|
283
|
+
"name": "label",
|
|
284
|
+
"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.",
|
|
285
|
+
"values": []
|
|
286
|
+
}
|
|
287
|
+
],
|
|
288
|
+
"references": []
|
|
289
|
+
},
|
|
290
|
+
{
|
|
291
|
+
"name": "flow-ui-breadcrumb-item",
|
|
292
|
+
"description": "Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
|
|
293
|
+
"attributes": [
|
|
294
|
+
{
|
|
295
|
+
"name": "href",
|
|
296
|
+
"description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
|
|
297
|
+
"values": []
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"name": "target",
|
|
301
|
+
"description": "Tells the browser where to open the link. Only used when `href` is set.",
|
|
302
|
+
"values": [
|
|
303
|
+
{ "name": "_blank" },
|
|
304
|
+
{ "name": "_parent" },
|
|
305
|
+
{ "name": "_self" },
|
|
306
|
+
{ "name": "_top" }
|
|
307
|
+
]
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"name": "rel",
|
|
311
|
+
"description": "The `rel` attribute to use on the link. Only used when `href` is set.",
|
|
312
|
+
"values": []
|
|
313
|
+
}
|
|
314
|
+
],
|
|
315
|
+
"references": []
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
"name": "flow-ui-busy-overlay",
|
|
319
|
+
"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)_",
|
|
243
320
|
"attributes": [
|
|
321
|
+
{ "name": "busy", "values": [] },
|
|
244
322
|
{
|
|
245
323
|
"name": "variant",
|
|
246
|
-
"description": "The
|
|
324
|
+
"description": "The default loading animation's theme variant.",
|
|
247
325
|
"values": [
|
|
248
326
|
{ "name": "primary" },
|
|
249
327
|
{ "name": "secondary" },
|
|
@@ -255,7 +333,7 @@
|
|
|
255
333
|
},
|
|
256
334
|
{
|
|
257
335
|
"name": "size",
|
|
258
|
-
"description": "
|
|
336
|
+
"description": "Size of the loading animation",
|
|
259
337
|
"values": [
|
|
260
338
|
{ "name": "small" },
|
|
261
339
|
{ "name": "medium" },
|
|
@@ -263,25 +341,8 @@
|
|
|
263
341
|
]
|
|
264
342
|
},
|
|
265
343
|
{
|
|
266
|
-
"name": "
|
|
267
|
-
"description": "
|
|
268
|
-
"values": []
|
|
269
|
-
},
|
|
270
|
-
{
|
|
271
|
-
"name": "pulse",
|
|
272
|
-
"description": "Makes the badge pulsate to draw attention.",
|
|
273
|
-
"values": []
|
|
274
|
-
}
|
|
275
|
-
],
|
|
276
|
-
"references": []
|
|
277
|
-
},
|
|
278
|
-
{
|
|
279
|
-
"name": "flow-ui-breadcrumb",
|
|
280
|
-
"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.",
|
|
281
|
-
"attributes": [
|
|
282
|
-
{
|
|
283
|
-
"name": "label",
|
|
284
|
-
"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.",
|
|
344
|
+
"name": "overlay-parent",
|
|
345
|
+
"description": "To overlay the parent element",
|
|
285
346
|
"values": []
|
|
286
347
|
}
|
|
287
348
|
],
|
|
@@ -348,67 +409,6 @@
|
|
|
348
409
|
],
|
|
349
410
|
"references": []
|
|
350
411
|
},
|
|
351
|
-
{
|
|
352
|
-
"name": "flow-ui-breadcrumb-item",
|
|
353
|
-
"description": "Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
|
|
354
|
-
"attributes": [
|
|
355
|
-
{
|
|
356
|
-
"name": "href",
|
|
357
|
-
"description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
|
|
358
|
-
"values": []
|
|
359
|
-
},
|
|
360
|
-
{
|
|
361
|
-
"name": "target",
|
|
362
|
-
"description": "Tells the browser where to open the link. Only used when `href` is set.",
|
|
363
|
-
"values": [
|
|
364
|
-
{ "name": "_blank" },
|
|
365
|
-
{ "name": "_parent" },
|
|
366
|
-
{ "name": "_self" },
|
|
367
|
-
{ "name": "_top" }
|
|
368
|
-
]
|
|
369
|
-
},
|
|
370
|
-
{
|
|
371
|
-
"name": "rel",
|
|
372
|
-
"description": "The `rel` attribute to use on the link. Only used when `href` is set.",
|
|
373
|
-
"values": []
|
|
374
|
-
}
|
|
375
|
-
],
|
|
376
|
-
"references": []
|
|
377
|
-
},
|
|
378
|
-
{
|
|
379
|
-
"name": "flow-ui-busy-overlay",
|
|
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)_",
|
|
381
|
-
"attributes": [
|
|
382
|
-
{ "name": "busy", "values": [] },
|
|
383
|
-
{
|
|
384
|
-
"name": "variant",
|
|
385
|
-
"description": "The default loading animation's theme variant.",
|
|
386
|
-
"values": [
|
|
387
|
-
{ "name": "primary" },
|
|
388
|
-
{ "name": "secondary" },
|
|
389
|
-
{ "name": "success" },
|
|
390
|
-
{ "name": "neutral" },
|
|
391
|
-
{ "name": "warning" },
|
|
392
|
-
{ "name": "danger" }
|
|
393
|
-
]
|
|
394
|
-
},
|
|
395
|
-
{
|
|
396
|
-
"name": "size",
|
|
397
|
-
"description": "Size of the loading animation",
|
|
398
|
-
"values": [
|
|
399
|
-
{ "name": "small" },
|
|
400
|
-
{ "name": "medium" },
|
|
401
|
-
{ "name": "large" }
|
|
402
|
-
]
|
|
403
|
-
},
|
|
404
|
-
{
|
|
405
|
-
"name": "overlay-parent",
|
|
406
|
-
"description": "To overlay the parent element",
|
|
407
|
-
"values": []
|
|
408
|
-
}
|
|
409
|
-
],
|
|
410
|
-
"references": []
|
|
411
|
-
},
|
|
412
412
|
{
|
|
413
413
|
"name": "flow-ui-button",
|
|
414
414
|
"description": "Buttons represent actions that are available to the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the button loses focus.\n- **flow-ui-focus** - Emitted when the button gains focus.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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 - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<flow-ui-icon>` element.",
|
|
@@ -1188,6 +1188,18 @@
|
|
|
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
|
+
},
|
|
1191
1203
|
{
|
|
1192
1204
|
"name": "flow-ui-drawer",
|
|
1193
1205
|
"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.",
|
|
@@ -1351,76 +1363,64 @@
|
|
|
1351
1363
|
"references": []
|
|
1352
1364
|
},
|
|
1353
1365
|
{
|
|
1354
|
-
"name": "flow-ui-
|
|
1355
|
-
"description": "
|
|
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).",
|
|
1356
1368
|
"attributes": [
|
|
1357
1369
|
{
|
|
1358
|
-
"name": "
|
|
1359
|
-
"description": "
|
|
1370
|
+
"name": "title",
|
|
1371
|
+
"description": "The gauge title displayed in the header. Alternatively, use the `title` slot to enhance the label with HTML markup.",
|
|
1360
1372
|
"values": []
|
|
1361
|
-
}
|
|
1362
|
-
],
|
|
1363
|
-
"references": []
|
|
1364
|
-
},
|
|
1365
|
-
{
|
|
1366
|
-
"name": "flow-ui-icon",
|
|
1367
|
-
"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.",
|
|
1368
|
-
"attributes": [
|
|
1373
|
+
},
|
|
1369
1374
|
{
|
|
1370
|
-
"name": "
|
|
1371
|
-
"description": "The
|
|
1375
|
+
"name": "units",
|
|
1376
|
+
"description": "The units of the gauge value.",
|
|
1372
1377
|
"values": []
|
|
1373
1378
|
},
|
|
1374
1379
|
{
|
|
1375
|
-
"name": "
|
|
1376
|
-
"description": "
|
|
1380
|
+
"name": "value",
|
|
1381
|
+
"description": "The value to display in the gauge.",
|
|
1377
1382
|
"values": []
|
|
1378
1383
|
},
|
|
1379
1384
|
{
|
|
1380
|
-
"name": "
|
|
1381
|
-
"description": "
|
|
1385
|
+
"name": "icon",
|
|
1386
|
+
"description": "The icon to display in the gauge header.",
|
|
1382
1387
|
"values": []
|
|
1383
1388
|
},
|
|
1384
1389
|
{
|
|
1385
|
-
"name": "library",
|
|
1386
|
-
"description": "The
|
|
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.",
|
|
1387
1397
|
"values": []
|
|
1388
1398
|
}
|
|
1389
1399
|
],
|
|
1390
1400
|
"references": []
|
|
1391
1401
|
},
|
|
1392
1402
|
{
|
|
1393
|
-
"name": "flow-ui-
|
|
1394
|
-
"description": "
|
|
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.",
|
|
1395
1405
|
"attributes": [
|
|
1396
1406
|
{
|
|
1397
|
-
"name": "
|
|
1398
|
-
"description": "The
|
|
1399
|
-
"values": []
|
|
1400
|
-
},
|
|
1401
|
-
{
|
|
1402
|
-
"name": "units",
|
|
1403
|
-
"description": "The units of the gauge value.",
|
|
1404
|
-
"values": []
|
|
1405
|
-
},
|
|
1406
|
-
{
|
|
1407
|
-
"name": "value",
|
|
1408
|
-
"description": "The value to display in the gauge.",
|
|
1407
|
+
"name": "name",
|
|
1408
|
+
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1409
1409
|
"values": []
|
|
1410
1410
|
},
|
|
1411
1411
|
{
|
|
1412
|
-
"name": "
|
|
1413
|
-
"description": "
|
|
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
1414
|
"values": []
|
|
1415
1415
|
},
|
|
1416
1416
|
{
|
|
1417
|
-
"name": "
|
|
1418
|
-
"description": "
|
|
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
1419
|
"values": []
|
|
1420
1420
|
},
|
|
1421
1421
|
{
|
|
1422
|
-
"name": "
|
|
1423
|
-
"description": "The
|
|
1422
|
+
"name": "library",
|
|
1423
|
+
"description": "The name of a registered custom icon library.",
|
|
1424
1424
|
"values": []
|
|
1425
1425
|
}
|
|
1426
1426
|
],
|
|
@@ -1730,20 +1730,19 @@
|
|
|
1730
1730
|
"references": []
|
|
1731
1731
|
},
|
|
1732
1732
|
{
|
|
1733
|
-
"name": "flow-ui-list
|
|
1734
|
-
"description": "A
|
|
1733
|
+
"name": "flow-ui-list",
|
|
1734
|
+
"description": "A panel header provides a label, optional accessory controls and expand/collapse behavior for panels.\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.",
|
|
1735
1735
|
"attributes": [
|
|
1736
1736
|
{
|
|
1737
|
-
"name": "
|
|
1738
|
-
"description": "The
|
|
1737
|
+
"name": "value",
|
|
1738
|
+
"description": "The current selected list item. (selectable lists only)",
|
|
1739
1739
|
"values": []
|
|
1740
1740
|
},
|
|
1741
1741
|
{
|
|
1742
|
-
"name": "
|
|
1743
|
-
"description": "
|
|
1742
|
+
"name": "selectable",
|
|
1743
|
+
"description": "Set to enable radio-button-style selection of list items.",
|
|
1744
1744
|
"values": []
|
|
1745
1745
|
},
|
|
1746
|
-
{ "name": "checked", "values": [] },
|
|
1747
1746
|
{
|
|
1748
1747
|
"name": "editable",
|
|
1749
1748
|
"description": "Set to enable renaming of the list item text.",
|
|
@@ -1758,29 +1757,25 @@
|
|
|
1758
1757
|
"name": "removable",
|
|
1759
1758
|
"description": "Set to enable removing the list item.",
|
|
1760
1759
|
"values": []
|
|
1761
|
-
},
|
|
1762
|
-
{
|
|
1763
|
-
"name": "disabled",
|
|
1764
|
-
"description": "Set to enable removing the list item.",
|
|
1765
|
-
"values": []
|
|
1766
1760
|
}
|
|
1767
1761
|
],
|
|
1768
1762
|
"references": []
|
|
1769
1763
|
},
|
|
1770
1764
|
{
|
|
1771
|
-
"name": "flow-ui-list",
|
|
1772
|
-
"description": "A
|
|
1765
|
+
"name": "flow-ui-list-item",
|
|
1766
|
+
"description": "A list item.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the list item is renamed.\n- **flow-ui-remove** - Emitted when the list item is removed. Calling `event.preventDefault()` will cancel the removal.\n- **flow-ui-select** - Emitted when a menu item is selected.\n- **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - **prefix** - The list item's prefix content.\n- **suffix** - The list item's suffix content.\n- **menu** - Specify custom menu items to add to the list item's menu.\n\n### **CSS Properties:**\n - **padding** - The padding around the header. Defaults to `--flow-ui-panel-header-padding`. _(default: undefined)_\n- **header-height** - The height of the header. Defaults to `--flow-ui-panel-header-height`. _(default: undefined)_\n- **background-color** - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`. _(default: undefined)_\n- **color** - The text color of the header. Defaults to `--flow-ui-panel-header-color`. _(default: undefined)_\n- **accessory-color** - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **input** - The list item's flow-ui-input control.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **reorder-icon** - The list item's reorder icon.\n- **menu-button** - The list item's menu-button.",
|
|
1773
1767
|
"attributes": [
|
|
1774
1768
|
{
|
|
1775
|
-
"name": "
|
|
1776
|
-
"description": "The
|
|
1769
|
+
"name": "label",
|
|
1770
|
+
"description": "The label text for the list item.",
|
|
1777
1771
|
"values": []
|
|
1778
1772
|
},
|
|
1779
1773
|
{
|
|
1780
|
-
"name": "
|
|
1781
|
-
"description": "
|
|
1774
|
+
"name": "value",
|
|
1775
|
+
"description": "The tracking value (id) for the list item.",
|
|
1782
1776
|
"values": []
|
|
1783
1777
|
},
|
|
1778
|
+
{ "name": "checked", "values": [] },
|
|
1784
1779
|
{
|
|
1785
1780
|
"name": "editable",
|
|
1786
1781
|
"description": "Set to enable renaming of the list item text.",
|
|
@@ -1795,6 +1790,11 @@
|
|
|
1795
1790
|
"name": "removable",
|
|
1796
1791
|
"description": "Set to enable removing the list item.",
|
|
1797
1792
|
"values": []
|
|
1793
|
+
},
|
|
1794
|
+
{
|
|
1795
|
+
"name": "disabled",
|
|
1796
|
+
"description": "Set to enable removing the list item.",
|
|
1797
|
+
"values": []
|
|
1798
1798
|
}
|
|
1799
1799
|
],
|
|
1800
1800
|
"references": []
|
|
@@ -1856,6 +1856,12 @@
|
|
|
1856
1856
|
],
|
|
1857
1857
|
"references": []
|
|
1858
1858
|
},
|
|
1859
|
+
{
|
|
1860
|
+
"name": "flow-ui-menu",
|
|
1861
|
+
"description": "Menus provide a list of options for the user to choose from.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
|
|
1862
|
+
"attributes": [],
|
|
1863
|
+
"references": []
|
|
1864
|
+
},
|
|
1859
1865
|
{
|
|
1860
1866
|
"name": "flow-ui-menu-item",
|
|
1861
1867
|
"description": "Menu items provide options for the user to pick from in a menu.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The menu item'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 - **base** - The component's base wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
|
|
@@ -1893,12 +1899,6 @@
|
|
|
1893
1899
|
"attributes": [],
|
|
1894
1900
|
"references": []
|
|
1895
1901
|
},
|
|
1896
|
-
{
|
|
1897
|
-
"name": "flow-ui-menu",
|
|
1898
|
-
"description": "Menus provide a list of options for the user to choose from.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
|
|
1899
|
-
"attributes": [],
|
|
1900
|
-
"references": []
|
|
1901
|
-
},
|
|
1902
1902
|
{
|
|
1903
1903
|
"name": "flow-ui-mutation-observer",
|
|
1904
1904
|
"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.",
|
|
@@ -1936,6 +1936,54 @@
|
|
|
1936
1936
|
],
|
|
1937
1937
|
"references": []
|
|
1938
1938
|
},
|
|
1939
|
+
{
|
|
1940
|
+
"name": "flow-ui-option",
|
|
1941
|
+
"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.",
|
|
1942
|
+
"attributes": [
|
|
1943
|
+
{
|
|
1944
|
+
"name": "value",
|
|
1945
|
+
"description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
|
|
1946
|
+
"values": []
|
|
1947
|
+
},
|
|
1948
|
+
{
|
|
1949
|
+
"name": "disabled",
|
|
1950
|
+
"description": "Draws the option in a disabled state, preventing selection.",
|
|
1951
|
+
"values": []
|
|
1952
|
+
},
|
|
1953
|
+
{
|
|
1954
|
+
"name": "size",
|
|
1955
|
+
"description": "The options's size.",
|
|
1956
|
+
"values": [
|
|
1957
|
+
{ "name": "small" },
|
|
1958
|
+
{ "name": "medium" },
|
|
1959
|
+
{ "name": "large" }
|
|
1960
|
+
]
|
|
1961
|
+
}
|
|
1962
|
+
],
|
|
1963
|
+
"references": []
|
|
1964
|
+
},
|
|
1965
|
+
{
|
|
1966
|
+
"name": "flow-ui-panel",
|
|
1967
|
+
"description": "Panels are use with split-views to create resizable areas.\n\n\n---\n\n\n\n\n### **Methods:**\n - **expand(emitEvent: _boolean_)** - Open the panel\n- **collapse(emitEvent: _boolean_)** - Close the panel\n\n### **CSS Properties:**\n - **--padding** - Padding to add to the panel when the `padding` attribute is set. Defaults to `--flow-ui-spacing-small`. _(default: undefined)_",
|
|
1968
|
+
"attributes": [
|
|
1969
|
+
{
|
|
1970
|
+
"name": "closed",
|
|
1971
|
+
"description": "Indicates whether the panel is open or closed.",
|
|
1972
|
+
"values": []
|
|
1973
|
+
},
|
|
1974
|
+
{
|
|
1975
|
+
"name": "scrollable",
|
|
1976
|
+
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
1977
|
+
"values": []
|
|
1978
|
+
},
|
|
1979
|
+
{
|
|
1980
|
+
"name": "padding",
|
|
1981
|
+
"description": "Indicates whether the panel body has padding.",
|
|
1982
|
+
"values": []
|
|
1983
|
+
}
|
|
1984
|
+
],
|
|
1985
|
+
"references": []
|
|
1986
|
+
},
|
|
1939
1987
|
{
|
|
1940
1988
|
"name": "flow-ui-panel-header",
|
|
1941
1989
|
"description": "A panel header provides a label, optional accessory controls and expand/collapse behavior for panels.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-collapse** - Emitted when the header is collapsed by UI interaction.\n- **flow-ui-expand** - Emitted when the header is expanded by UI interaction.\n\n### **Slots:**\n - **title** - The panel header's title content. Alternatively, use the `title` attribute for plain text.\n- **prefix** - The panel header's prefix content.\n- **suffix** - The panel header's suffix content.\n- **expand-icon** - Specify an alternative `<flow-ui-icon>` to use for the expand icon.\n- **collapse-icon** - Specify an alternative `<flow-ui-icon>` to use for the collapse icon.\n\n### **CSS Properties:**\n - **padding** - The padding around the header. Defaults to `--flow-ui-panel-header-padding`. _(default: undefined)_\n- **header-height** - The height of the header. Defaults to `--flow-ui-panel-header-height`. _(default: undefined)_\n- **background-color** - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`. _(default: undefined)_\n- **color** - The text color of the header. Defaults to `--flow-ui-panel-header-color`. _(default: undefined)_\n- **accessory-color** - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **title** - The container that wraps the title.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **toggle-icon** - The container that wraps the expand/collapse icon.",
|
|
@@ -2102,32 +2150,6 @@
|
|
|
2102
2150
|
],
|
|
2103
2151
|
"references": []
|
|
2104
2152
|
},
|
|
2105
|
-
{
|
|
2106
|
-
"name": "flow-ui-option",
|
|
2107
|
-
"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.",
|
|
2108
|
-
"attributes": [
|
|
2109
|
-
{
|
|
2110
|
-
"name": "value",
|
|
2111
|
-
"description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
|
|
2112
|
-
"values": []
|
|
2113
|
-
},
|
|
2114
|
-
{
|
|
2115
|
-
"name": "disabled",
|
|
2116
|
-
"description": "Draws the option in a disabled state, preventing selection.",
|
|
2117
|
-
"values": []
|
|
2118
|
-
},
|
|
2119
|
-
{
|
|
2120
|
-
"name": "size",
|
|
2121
|
-
"description": "The options's size.",
|
|
2122
|
-
"values": [
|
|
2123
|
-
{ "name": "small" },
|
|
2124
|
-
{ "name": "medium" },
|
|
2125
|
-
{ "name": "large" }
|
|
2126
|
-
]
|
|
2127
|
-
}
|
|
2128
|
-
],
|
|
2129
|
-
"references": []
|
|
2130
|
-
},
|
|
2131
2153
|
{
|
|
2132
2154
|
"name": "flow-ui-progress-bar",
|
|
2133
2155
|
"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.",
|
|
@@ -2289,57 +2311,6 @@
|
|
|
2289
2311
|
],
|
|
2290
2312
|
"references": []
|
|
2291
2313
|
},
|
|
2292
|
-
{
|
|
2293
|
-
"name": "flow-ui-radio-group",
|
|
2294
|
-
"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.",
|
|
2295
|
-
"attributes": [
|
|
2296
|
-
{
|
|
2297
|
-
"name": "label",
|
|
2298
|
-
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
2299
|
-
"values": []
|
|
2300
|
-
},
|
|
2301
|
-
{
|
|
2302
|
-
"name": "help-text",
|
|
2303
|
-
"description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2304
|
-
"values": []
|
|
2305
|
-
},
|
|
2306
|
-
{
|
|
2307
|
-
"name": "name",
|
|
2308
|
-
"description": "The name of the radio group, submitted as a name/value pair with form data.",
|
|
2309
|
-
"values": []
|
|
2310
|
-
},
|
|
2311
|
-
{
|
|
2312
|
-
"name": "value",
|
|
2313
|
-
"description": "The current value of the radio group, submitted as a name/value pair with form data.",
|
|
2314
|
-
"values": []
|
|
2315
|
-
},
|
|
2316
|
-
{
|
|
2317
|
-
"name": "size",
|
|
2318
|
-
"description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
|
|
2319
|
-
"values": [
|
|
2320
|
-
{ "name": "small" },
|
|
2321
|
-
{ "name": "medium" },
|
|
2322
|
-
{ "name": "large" }
|
|
2323
|
-
]
|
|
2324
|
-
},
|
|
2325
|
-
{
|
|
2326
|
-
"name": "reverse",
|
|
2327
|
-
"description": "Display the radios using a reversed style with left-aligned labels.",
|
|
2328
|
-
"values": []
|
|
2329
|
-
},
|
|
2330
|
-
{
|
|
2331
|
-
"name": "form",
|
|
2332
|
-
"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.",
|
|
2333
|
-
"values": []
|
|
2334
|
-
},
|
|
2335
|
-
{
|
|
2336
|
-
"name": "required",
|
|
2337
|
-
"description": "Ensures a child radio is checked before allowing the containing form to submit.",
|
|
2338
|
-
"values": []
|
|
2339
|
-
}
|
|
2340
|
-
],
|
|
2341
|
-
"references": []
|
|
2342
|
-
},
|
|
2343
2314
|
{
|
|
2344
2315
|
"name": "flow-ui-range",
|
|
2345
2316
|
"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.",
|
|
@@ -2413,25 +2384,88 @@
|
|
|
2413
2384
|
"references": []
|
|
2414
2385
|
},
|
|
2415
2386
|
{
|
|
2416
|
-
"name": "flow-ui-
|
|
2417
|
-
"description": "
|
|
2387
|
+
"name": "flow-ui-radio-group",
|
|
2388
|
+
"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.",
|
|
2418
2389
|
"attributes": [
|
|
2419
2390
|
{
|
|
2420
|
-
"name": "
|
|
2421
|
-
"description": "The
|
|
2391
|
+
"name": "label",
|
|
2392
|
+
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
2422
2393
|
"values": []
|
|
2423
2394
|
},
|
|
2424
2395
|
{
|
|
2425
|
-
"name": "
|
|
2426
|
-
"description": "The
|
|
2427
|
-
"values": [
|
|
2396
|
+
"name": "help-text",
|
|
2397
|
+
"description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2398
|
+
"values": []
|
|
2428
2399
|
},
|
|
2429
2400
|
{
|
|
2430
|
-
"name": "
|
|
2431
|
-
"description": "The
|
|
2432
|
-
"values": [
|
|
2433
|
-
|
|
2434
|
-
|
|
2401
|
+
"name": "name",
|
|
2402
|
+
"description": "The name of the radio group, submitted as a name/value pair with form data.",
|
|
2403
|
+
"values": []
|
|
2404
|
+
},
|
|
2405
|
+
{
|
|
2406
|
+
"name": "value",
|
|
2407
|
+
"description": "The current value of the radio group, submitted as a name/value pair with form data.",
|
|
2408
|
+
"values": []
|
|
2409
|
+
},
|
|
2410
|
+
{
|
|
2411
|
+
"name": "size",
|
|
2412
|
+
"description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
|
|
2413
|
+
"values": [
|
|
2414
|
+
{ "name": "small" },
|
|
2415
|
+
{ "name": "medium" },
|
|
2416
|
+
{ "name": "large" }
|
|
2417
|
+
]
|
|
2418
|
+
},
|
|
2419
|
+
{
|
|
2420
|
+
"name": "reverse",
|
|
2421
|
+
"description": "Display the radios using a reversed style with left-aligned labels.",
|
|
2422
|
+
"values": []
|
|
2423
|
+
},
|
|
2424
|
+
{
|
|
2425
|
+
"name": "form",
|
|
2426
|
+
"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.",
|
|
2427
|
+
"values": []
|
|
2428
|
+
},
|
|
2429
|
+
{
|
|
2430
|
+
"name": "required",
|
|
2431
|
+
"description": "Ensures a child radio is checked before allowing the containing form to submit.",
|
|
2432
|
+
"values": []
|
|
2433
|
+
}
|
|
2434
|
+
],
|
|
2435
|
+
"references": []
|
|
2436
|
+
},
|
|
2437
|
+
{
|
|
2438
|
+
"name": "flow-ui-resize-observer",
|
|
2439
|
+
"description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
|
|
2440
|
+
"attributes": [
|
|
2441
|
+
{
|
|
2442
|
+
"name": "disabled",
|
|
2443
|
+
"description": "Disables the observer.",
|
|
2444
|
+
"values": []
|
|
2445
|
+
}
|
|
2446
|
+
],
|
|
2447
|
+
"references": []
|
|
2448
|
+
},
|
|
2449
|
+
{
|
|
2450
|
+
"name": "flow-ui-select",
|
|
2451
|
+
"description": "Selects allow you to choose items from a menu of predefined options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-clear** - Emitted when the control's value is cleared.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-show** - Emitted when the select's menu opens.\n- **flow-ui-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the select's menu closes.\n- **flow-ui-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\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- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.\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 combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\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 select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
|
|
2452
|
+
"attributes": [
|
|
2453
|
+
{
|
|
2454
|
+
"name": "name",
|
|
2455
|
+
"description": "The name of the select, submitted as a name/value pair with form data.",
|
|
2456
|
+
"values": []
|
|
2457
|
+
},
|
|
2458
|
+
{
|
|
2459
|
+
"name": "value",
|
|
2460
|
+
"description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
|
|
2461
|
+
"values": [{ "name": "string[]" }]
|
|
2462
|
+
},
|
|
2463
|
+
{
|
|
2464
|
+
"name": "size",
|
|
2465
|
+
"description": "The select's size.",
|
|
2466
|
+
"values": [
|
|
2467
|
+
{ "name": "small" },
|
|
2468
|
+
{ "name": "medium" },
|
|
2435
2469
|
{ "name": "large" }
|
|
2436
2470
|
]
|
|
2437
2471
|
},
|
|
@@ -2522,18 +2556,6 @@
|
|
|
2522
2556
|
],
|
|
2523
2557
|
"references": []
|
|
2524
2558
|
},
|
|
2525
|
-
{
|
|
2526
|
-
"name": "flow-ui-resize-observer",
|
|
2527
|
-
"description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
|
|
2528
|
-
"attributes": [
|
|
2529
|
-
{
|
|
2530
|
-
"name": "disabled",
|
|
2531
|
-
"description": "Disables the observer.",
|
|
2532
|
-
"values": []
|
|
2533
|
-
}
|
|
2534
|
-
],
|
|
2535
|
-
"references": []
|
|
2536
|
-
},
|
|
2537
2559
|
{
|
|
2538
2560
|
"name": "flow-ui-split-view",
|
|
2539
2561
|
"description": "Split-views contain two or more split-view panes to create resizable areas.\n\n\n---\n\n\n",
|
|
@@ -2573,28 +2595,6 @@
|
|
|
2573
2595
|
],
|
|
2574
2596
|
"references": []
|
|
2575
2597
|
},
|
|
2576
|
-
{
|
|
2577
|
-
"name": "flow-ui-split-view-toggle-button",
|
|
2578
|
-
"description": "Use a split panel toggle button to control a parent panel's open/closed state\n\n\n---\n\n\n",
|
|
2579
|
-
"attributes": [
|
|
2580
|
-
{
|
|
2581
|
-
"name": "name",
|
|
2582
|
-
"description": "The icon to use for the button.",
|
|
2583
|
-
"values": []
|
|
2584
|
-
},
|
|
2585
|
-
{
|
|
2586
|
-
"name": "library",
|
|
2587
|
-
"description": "The icon library to use for the button icon.",
|
|
2588
|
-
"values": []
|
|
2589
|
-
},
|
|
2590
|
-
{
|
|
2591
|
-
"name": "closed",
|
|
2592
|
-
"description": "Set to control the open/closed state of the parent split pane.",
|
|
2593
|
-
"values": []
|
|
2594
|
-
}
|
|
2595
|
-
],
|
|
2596
|
-
"references": []
|
|
2597
|
-
},
|
|
2598
2598
|
{
|
|
2599
2599
|
"name": "flow-ui-split-view-pane",
|
|
2600
2600
|
"description": "Split-view panes are used with split-views to create resizable areas.\n\n\n---\n\n\n\n\n### **Methods:**\n - **expand(emitEvent)** - Open the split pane.\n- **collapse(emitEvent)** - Close the split pane.",
|
|
@@ -2642,6 +2642,34 @@
|
|
|
2642
2642
|
],
|
|
2643
2643
|
"references": []
|
|
2644
2644
|
},
|
|
2645
|
+
{
|
|
2646
|
+
"name": "flow-ui-split-view-toggle-button",
|
|
2647
|
+
"description": "Use a split panel toggle button to control a parent panel's open/closed state\n\n\n---\n\n\n",
|
|
2648
|
+
"attributes": [
|
|
2649
|
+
{
|
|
2650
|
+
"name": "name",
|
|
2651
|
+
"description": "The icon to use for the button.",
|
|
2652
|
+
"values": []
|
|
2653
|
+
},
|
|
2654
|
+
{
|
|
2655
|
+
"name": "library",
|
|
2656
|
+
"description": "The icon library to use for the button icon.",
|
|
2657
|
+
"values": []
|
|
2658
|
+
},
|
|
2659
|
+
{
|
|
2660
|
+
"name": "closed",
|
|
2661
|
+
"description": "Set to control the open/closed state of the parent split pane.",
|
|
2662
|
+
"values": []
|
|
2663
|
+
}
|
|
2664
|
+
],
|
|
2665
|
+
"references": []
|
|
2666
|
+
},
|
|
2667
|
+
{
|
|
2668
|
+
"name": "flow-ui-stepper",
|
|
2669
|
+
"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`",
|
|
2670
|
+
"attributes": [],
|
|
2671
|
+
"references": []
|
|
2672
|
+
},
|
|
2645
2673
|
{
|
|
2646
2674
|
"name": "flow-ui-stepper-panel",
|
|
2647
2675
|
"description": "Stepper panels provide a single page in a stepper to guide users through a series of steps.\n\n\n---\n\n\n",
|
|
@@ -2670,22 +2698,56 @@
|
|
|
2670
2698
|
"references": []
|
|
2671
2699
|
},
|
|
2672
2700
|
{
|
|
2673
|
-
"name": "flow-ui-
|
|
2674
|
-
"description": "
|
|
2701
|
+
"name": "flow-ui-switch",
|
|
2702
|
+
"description": "Switches allow the user to toggle an option on or off.\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 the control's checked state changes.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\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 - _default_ - The switch's label.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The control that houses the switch's thumb.\n- **thumb** - The switch's thumb.\n- **label** - The switch's label.",
|
|
2675
2703
|
"attributes": [
|
|
2676
2704
|
{
|
|
2677
|
-
"name": "
|
|
2678
|
-
"description": "
|
|
2705
|
+
"name": "name",
|
|
2706
|
+
"description": "The name of the switch, submitted as a name/value pair with form data.",
|
|
2679
2707
|
"values": []
|
|
2680
2708
|
},
|
|
2681
2709
|
{
|
|
2682
|
-
"name": "
|
|
2683
|
-
"description": "
|
|
2710
|
+
"name": "value",
|
|
2711
|
+
"description": "The current value of the switch, submitted as a name/value pair with form data.",
|
|
2684
2712
|
"values": []
|
|
2685
2713
|
},
|
|
2686
2714
|
{
|
|
2687
|
-
"name": "
|
|
2688
|
-
"description": "
|
|
2715
|
+
"name": "size",
|
|
2716
|
+
"description": "The switch's size.",
|
|
2717
|
+
"values": [
|
|
2718
|
+
{ "name": "small" },
|
|
2719
|
+
{ "name": "medium" },
|
|
2720
|
+
{ "name": "large" }
|
|
2721
|
+
]
|
|
2722
|
+
},
|
|
2723
|
+
{
|
|
2724
|
+
"name": "disabled",
|
|
2725
|
+
"description": "Disables the switch.",
|
|
2726
|
+
"values": []
|
|
2727
|
+
},
|
|
2728
|
+
{
|
|
2729
|
+
"name": "checked",
|
|
2730
|
+
"description": "Draws the switch in a checked state.",
|
|
2731
|
+
"values": []
|
|
2732
|
+
},
|
|
2733
|
+
{
|
|
2734
|
+
"name": "form",
|
|
2735
|
+
"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.",
|
|
2736
|
+
"values": []
|
|
2737
|
+
},
|
|
2738
|
+
{
|
|
2739
|
+
"name": "required",
|
|
2740
|
+
"description": "Makes the switch a required field.",
|
|
2741
|
+
"values": []
|
|
2742
|
+
},
|
|
2743
|
+
{
|
|
2744
|
+
"name": "help-text",
|
|
2745
|
+
"description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2746
|
+
"values": []
|
|
2747
|
+
},
|
|
2748
|
+
{
|
|
2749
|
+
"name": "divider",
|
|
2750
|
+
"description": "Indicates that the control should display a divider",
|
|
2689
2751
|
"values": []
|
|
2690
2752
|
}
|
|
2691
2753
|
],
|
|
@@ -2754,56 +2816,32 @@
|
|
|
2754
2816
|
"references": []
|
|
2755
2817
|
},
|
|
2756
2818
|
{
|
|
2757
|
-
"name": "flow-ui-
|
|
2758
|
-
"description": "
|
|
2819
|
+
"name": "flow-ui-tab-group",
|
|
2820
|
+
"description": "Tab groups organize content into a container that shows one section at a time.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-tab-show** - Emitted when a tab is shown.\n- **flow-ui-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<flow-ui-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<flow-ui-tab>` elements.\n\n### **CSS Properties:**\n - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **tabs** - The container that wraps the tabs.\n- **active-tab-indicator** - The line that highlights the currently selected tab.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<flow-ui-icon-button>`.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
|
|
2759
2821
|
"attributes": [
|
|
2760
2822
|
{
|
|
2761
|
-
"name": "
|
|
2762
|
-
"description": "The
|
|
2763
|
-
"values": []
|
|
2764
|
-
},
|
|
2765
|
-
{
|
|
2766
|
-
"name": "value",
|
|
2767
|
-
"description": "The current value of the switch, submitted as a name/value pair with form data.",
|
|
2768
|
-
"values": []
|
|
2769
|
-
},
|
|
2770
|
-
{
|
|
2771
|
-
"name": "size",
|
|
2772
|
-
"description": "The switch's size.",
|
|
2823
|
+
"name": "placement",
|
|
2824
|
+
"description": "The placement of the tabs.",
|
|
2773
2825
|
"values": [
|
|
2774
|
-
{ "name": "
|
|
2775
|
-
{ "name": "
|
|
2776
|
-
{ "name": "
|
|
2826
|
+
{ "name": "top" },
|
|
2827
|
+
{ "name": "bottom" },
|
|
2828
|
+
{ "name": "start" },
|
|
2829
|
+
{ "name": "end" }
|
|
2777
2830
|
]
|
|
2778
2831
|
},
|
|
2779
2832
|
{
|
|
2780
|
-
"name": "
|
|
2781
|
-
"description": "
|
|
2782
|
-
"values": []
|
|
2783
|
-
},
|
|
2784
|
-
{
|
|
2785
|
-
"name": "checked",
|
|
2786
|
-
"description": "Draws the switch in a checked state.",
|
|
2787
|
-
"values": []
|
|
2788
|
-
},
|
|
2789
|
-
{
|
|
2790
|
-
"name": "form",
|
|
2791
|
-
"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.",
|
|
2792
|
-
"values": []
|
|
2793
|
-
},
|
|
2794
|
-
{
|
|
2795
|
-
"name": "required",
|
|
2796
|
-
"description": "Makes the switch a required field.",
|
|
2797
|
-
"values": []
|
|
2833
|
+
"name": "activation",
|
|
2834
|
+
"description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
|
|
2835
|
+
"values": [{ "name": "auto" }, { "name": "manual" }]
|
|
2798
2836
|
},
|
|
2799
2837
|
{
|
|
2800
|
-
"name": "
|
|
2801
|
-
"description": "
|
|
2838
|
+
"name": "no-scroll-controls",
|
|
2839
|
+
"description": "Disables the scroll arrows that appear when tabs overflow.",
|
|
2802
2840
|
"values": []
|
|
2803
2841
|
},
|
|
2804
2842
|
{
|
|
2805
|
-
"name": "
|
|
2806
|
-
"description": "
|
|
2843
|
+
"name": "control-split-view",
|
|
2844
|
+
"description": "Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.",
|
|
2807
2845
|
"values": []
|
|
2808
2846
|
}
|
|
2809
2847
|
],
|
|
@@ -2837,59 +2875,21 @@
|
|
|
2837
2875
|
"references": []
|
|
2838
2876
|
},
|
|
2839
2877
|
{
|
|
2840
|
-
"name": "flow-ui-
|
|
2841
|
-
"description": "
|
|
2878
|
+
"name": "flow-ui-tag",
|
|
2879
|
+
"description": "Tags are used as labels to organize things or to indicate a selection.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<flow-ui-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
|
|
2842
2880
|
"attributes": [
|
|
2843
2881
|
{
|
|
2844
|
-
"name": "
|
|
2845
|
-
"description": "The
|
|
2882
|
+
"name": "variant",
|
|
2883
|
+
"description": "The tag's theme variant.",
|
|
2846
2884
|
"values": [
|
|
2847
|
-
{ "name": "
|
|
2848
|
-
{ "name": "
|
|
2849
|
-
{ "name": "
|
|
2850
|
-
{ "name": "
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
"description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
|
|
2856
|
-
"values": [{ "name": "auto" }, { "name": "manual" }]
|
|
2857
|
-
},
|
|
2858
|
-
{
|
|
2859
|
-
"name": "no-scroll-controls",
|
|
2860
|
-
"description": "Disables the scroll arrows that appear when tabs overflow.",
|
|
2861
|
-
"values": []
|
|
2862
|
-
},
|
|
2863
|
-
{
|
|
2864
|
-
"name": "control-split-view",
|
|
2865
|
-
"description": "Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.",
|
|
2866
|
-
"values": []
|
|
2867
|
-
}
|
|
2868
|
-
],
|
|
2869
|
-
"references": []
|
|
2870
|
-
},
|
|
2871
|
-
{
|
|
2872
|
-
"name": "flow-ui-stepper",
|
|
2873
|
-
"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`",
|
|
2874
|
-
"attributes": [],
|
|
2875
|
-
"references": []
|
|
2876
|
-
},
|
|
2877
|
-
{
|
|
2878
|
-
"name": "flow-ui-tag",
|
|
2879
|
-
"description": "Tags are used as labels to organize things or to indicate a selection.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<flow-ui-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
|
|
2880
|
-
"attributes": [
|
|
2881
|
-
{
|
|
2882
|
-
"name": "variant",
|
|
2883
|
-
"description": "The tag's theme variant.",
|
|
2884
|
-
"values": [
|
|
2885
|
-
{ "name": "" },
|
|
2886
|
-
{ "name": "primary" },
|
|
2887
|
-
{ "name": "secondary" },
|
|
2888
|
-
{ "name": "success" },
|
|
2889
|
-
{ "name": "neutral" },
|
|
2890
|
-
{ "name": "warning" },
|
|
2891
|
-
{ "name": "danger" },
|
|
2892
|
-
{ "name": "text" }
|
|
2885
|
+
{ "name": "" },
|
|
2886
|
+
{ "name": "primary" },
|
|
2887
|
+
{ "name": "secondary" },
|
|
2888
|
+
{ "name": "success" },
|
|
2889
|
+
{ "name": "neutral" },
|
|
2890
|
+
{ "name": "warning" },
|
|
2891
|
+
{ "name": "danger" },
|
|
2892
|
+
{ "name": "text" }
|
|
2893
2893
|
]
|
|
2894
2894
|
},
|
|
2895
2895
|
{
|
|
@@ -3063,6 +3063,85 @@
|
|
|
3063
3063
|
],
|
|
3064
3064
|
"references": []
|
|
3065
3065
|
},
|
|
3066
|
+
{
|
|
3067
|
+
"name": "flow-ui-timer",
|
|
3068
|
+
"description": "The timer component is the primary time control for Flo.w time-based visualizations.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-input** - Emitted when the control receives input.",
|
|
3069
|
+
"attributes": [
|
|
3070
|
+
{
|
|
3071
|
+
"name": "value",
|
|
3072
|
+
"description": "The value of the timer. (ISO8601 date/time string)",
|
|
3073
|
+
"values": []
|
|
3074
|
+
},
|
|
3075
|
+
{
|
|
3076
|
+
"name": "timezone",
|
|
3077
|
+
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
3078
|
+
"values": []
|
|
3079
|
+
},
|
|
3080
|
+
{
|
|
3081
|
+
"name": "locale",
|
|
3082
|
+
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
3083
|
+
"values": []
|
|
3084
|
+
},
|
|
3085
|
+
{
|
|
3086
|
+
"name": "running",
|
|
3087
|
+
"description": "Set to `true` to start the timer running.",
|
|
3088
|
+
"values": []
|
|
3089
|
+
},
|
|
3090
|
+
{
|
|
3091
|
+
"name": "dateFormat",
|
|
3092
|
+
"description": "The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3093
|
+
"values": []
|
|
3094
|
+
},
|
|
3095
|
+
{
|
|
3096
|
+
"name": "dayFormat",
|
|
3097
|
+
"description": "The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3098
|
+
"values": []
|
|
3099
|
+
},
|
|
3100
|
+
{
|
|
3101
|
+
"name": "timeFormat",
|
|
3102
|
+
"description": "The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3103
|
+
"values": []
|
|
3104
|
+
},
|
|
3105
|
+
{
|
|
3106
|
+
"name": "zoneFormat",
|
|
3107
|
+
"description": "The timezone format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3108
|
+
"values": []
|
|
3109
|
+
},
|
|
3110
|
+
{
|
|
3111
|
+
"name": "major-step",
|
|
3112
|
+
"description": "The major step size to use for the timer step controls.",
|
|
3113
|
+
"values": []
|
|
3114
|
+
},
|
|
3115
|
+
{
|
|
3116
|
+
"name": "minor-step",
|
|
3117
|
+
"description": "The minor step size to use for the timer step controls.",
|
|
3118
|
+
"values": []
|
|
3119
|
+
},
|
|
3120
|
+
{
|
|
3121
|
+
"name": "update-interval",
|
|
3122
|
+
"description": "The timer update interval.",
|
|
3123
|
+
"values": []
|
|
3124
|
+
},
|
|
3125
|
+
{
|
|
3126
|
+
"name": "hide-zone",
|
|
3127
|
+
"description": "Set to `true` to hide the timezone display.",
|
|
3128
|
+
"values": []
|
|
3129
|
+
},
|
|
3130
|
+
{
|
|
3131
|
+
"name": "placement",
|
|
3132
|
+
"description": "The placement of the calendar popup relative to the timer control.",
|
|
3133
|
+
"values": [
|
|
3134
|
+
{ "name": "top" },
|
|
3135
|
+
{ "name": "top-end" },
|
|
3136
|
+
{ "name": "top-start" },
|
|
3137
|
+
{ "name": "bottom" },
|
|
3138
|
+
{ "name": "bottom-start" },
|
|
3139
|
+
{ "name": "bottom-end" }
|
|
3140
|
+
]
|
|
3141
|
+
}
|
|
3142
|
+
],
|
|
3143
|
+
"references": []
|
|
3144
|
+
},
|
|
3066
3145
|
{
|
|
3067
3146
|
"name": "flow-ui-tool-button",
|
|
3068
3147
|
"description": "Tool buttons are used to build [toolbars](./flow-ui-tool-button-group). They can be used to toggle a state or perform an action.\n\n\n---\n\n\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n\n### **Slots:**\n - **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **icon** - The tool button's icon.\n- **tooltip** - The tool button's tooltip content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The button element.\n- **button--checked** - The button element when checked.\n- **tooltip** - The tooltip element.\n- **prefix** - The prefix slot.\n- **suffix** - The suffix slot.\n- **label-wrapper** - The wrapper that contains the icon and label.\n- **icon** - The icon slot. Alternatively, you can use the `icon` attribute.\n- **label** - The button label.",
|
|
@@ -3160,146 +3239,6 @@
|
|
|
3160
3239
|
],
|
|
3161
3240
|
"references": []
|
|
3162
3241
|
},
|
|
3163
|
-
{
|
|
3164
|
-
"name": "flow-ui-tooltip",
|
|
3165
|
-
"description": "Tooltips display additional information based on a specific action.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the tooltip begins to show.\n- **flow-ui-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **flow-ui-hide** - Emitted when the tooltip begins to hide.\n- **flow-ui-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\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- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
|
|
3166
|
-
"attributes": [
|
|
3167
|
-
{
|
|
3168
|
-
"name": "content",
|
|
3169
|
-
"description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
|
|
3170
|
-
"values": []
|
|
3171
|
-
},
|
|
3172
|
-
{
|
|
3173
|
-
"name": "placement",
|
|
3174
|
-
"description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
|
|
3175
|
-
"values": [
|
|
3176
|
-
{ "name": "" },
|
|
3177
|
-
{ "name": "top" },
|
|
3178
|
-
{ "name": "top-start" },
|
|
3179
|
-
{ "name": "top-end" },
|
|
3180
|
-
{ "name": "right" },
|
|
3181
|
-
{ "name": "right-start" },
|
|
3182
|
-
{ "name": "right-end" },
|
|
3183
|
-
{ "name": "bottom" },
|
|
3184
|
-
{ "name": "bottom-start" },
|
|
3185
|
-
{ "name": "bottom-end" },
|
|
3186
|
-
{ "name": "left" },
|
|
3187
|
-
{ "name": "left-start" },
|
|
3188
|
-
{ "name": "left-end" }
|
|
3189
|
-
]
|
|
3190
|
-
},
|
|
3191
|
-
{
|
|
3192
|
-
"name": "disabled",
|
|
3193
|
-
"description": "Disables the tooltip so it won't show when triggered.",
|
|
3194
|
-
"values": []
|
|
3195
|
-
},
|
|
3196
|
-
{
|
|
3197
|
-
"name": "distance",
|
|
3198
|
-
"description": "The distance in pixels from which to offset the tooltip away from its target.",
|
|
3199
|
-
"values": []
|
|
3200
|
-
},
|
|
3201
|
-
{
|
|
3202
|
-
"name": "open",
|
|
3203
|
-
"description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
|
|
3204
|
-
"values": []
|
|
3205
|
-
},
|
|
3206
|
-
{
|
|
3207
|
-
"name": "skidding",
|
|
3208
|
-
"description": "The distance in pixels from which to offset the tooltip along its target.",
|
|
3209
|
-
"values": []
|
|
3210
|
-
},
|
|
3211
|
-
{
|
|
3212
|
-
"name": "trigger",
|
|
3213
|
-
"description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
|
|
3214
|
-
"values": []
|
|
3215
|
-
},
|
|
3216
|
-
{
|
|
3217
|
-
"name": "hoist",
|
|
3218
|
-
"description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
|
|
3219
|
-
"values": []
|
|
3220
|
-
}
|
|
3221
|
-
],
|
|
3222
|
-
"references": []
|
|
3223
|
-
},
|
|
3224
|
-
{
|
|
3225
|
-
"name": "flow-ui-timer",
|
|
3226
|
-
"description": "The timer component is the primary time control for Flo.w time-based visualizations.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-input** - Emitted when the control receives input.",
|
|
3227
|
-
"attributes": [
|
|
3228
|
-
{
|
|
3229
|
-
"name": "value",
|
|
3230
|
-
"description": "The value of the timer. (ISO8601 date/time string)",
|
|
3231
|
-
"values": []
|
|
3232
|
-
},
|
|
3233
|
-
{
|
|
3234
|
-
"name": "timezone",
|
|
3235
|
-
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
3236
|
-
"values": []
|
|
3237
|
-
},
|
|
3238
|
-
{
|
|
3239
|
-
"name": "locale",
|
|
3240
|
-
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
3241
|
-
"values": []
|
|
3242
|
-
},
|
|
3243
|
-
{
|
|
3244
|
-
"name": "running",
|
|
3245
|
-
"description": "Set to `true` to start the timer running.",
|
|
3246
|
-
"values": []
|
|
3247
|
-
},
|
|
3248
|
-
{
|
|
3249
|
-
"name": "dateFormat",
|
|
3250
|
-
"description": "The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3251
|
-
"values": []
|
|
3252
|
-
},
|
|
3253
|
-
{
|
|
3254
|
-
"name": "dayFormat",
|
|
3255
|
-
"description": "The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3256
|
-
"values": []
|
|
3257
|
-
},
|
|
3258
|
-
{
|
|
3259
|
-
"name": "timeFormat",
|
|
3260
|
-
"description": "The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3261
|
-
"values": []
|
|
3262
|
-
},
|
|
3263
|
-
{
|
|
3264
|
-
"name": "zoneFormat",
|
|
3265
|
-
"description": "The timezone format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
3266
|
-
"values": []
|
|
3267
|
-
},
|
|
3268
|
-
{
|
|
3269
|
-
"name": "major-step",
|
|
3270
|
-
"description": "The major step size to use for the timer step controls.",
|
|
3271
|
-
"values": []
|
|
3272
|
-
},
|
|
3273
|
-
{
|
|
3274
|
-
"name": "minor-step",
|
|
3275
|
-
"description": "The minor step size to use for the timer step controls.",
|
|
3276
|
-
"values": []
|
|
3277
|
-
},
|
|
3278
|
-
{
|
|
3279
|
-
"name": "update-interval",
|
|
3280
|
-
"description": "The timer update interval.",
|
|
3281
|
-
"values": []
|
|
3282
|
-
},
|
|
3283
|
-
{
|
|
3284
|
-
"name": "hide-zone",
|
|
3285
|
-
"description": "Set to `true` to hide the timezone display.",
|
|
3286
|
-
"values": []
|
|
3287
|
-
},
|
|
3288
|
-
{
|
|
3289
|
-
"name": "placement",
|
|
3290
|
-
"description": "The placement of the calendar popup relative to the timer control.",
|
|
3291
|
-
"values": [
|
|
3292
|
-
{ "name": "top" },
|
|
3293
|
-
{ "name": "top-end" },
|
|
3294
|
-
{ "name": "top-start" },
|
|
3295
|
-
{ "name": "bottom" },
|
|
3296
|
-
{ "name": "bottom-start" },
|
|
3297
|
-
{ "name": "bottom-end" }
|
|
3298
|
-
]
|
|
3299
|
-
}
|
|
3300
|
-
],
|
|
3301
|
-
"references": []
|
|
3302
|
-
},
|
|
3303
3242
|
{
|
|
3304
3243
|
"name": "flow-ui-tool-button-group",
|
|
3305
3244
|
"description": "Tool buttons groups are used to build toolbars from [tool buttons](./flow-ui-tool-button).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-input** - Emitted when the control receives input.\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.",
|
|
@@ -3367,6 +3306,67 @@
|
|
|
3367
3306
|
],
|
|
3368
3307
|
"references": []
|
|
3369
3308
|
},
|
|
3309
|
+
{
|
|
3310
|
+
"name": "flow-ui-tooltip",
|
|
3311
|
+
"description": "Tooltips display additional information based on a specific action.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the tooltip begins to show.\n- **flow-ui-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **flow-ui-hide** - Emitted when the tooltip begins to hide.\n- **flow-ui-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\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- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
|
|
3312
|
+
"attributes": [
|
|
3313
|
+
{
|
|
3314
|
+
"name": "content",
|
|
3315
|
+
"description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
|
|
3316
|
+
"values": []
|
|
3317
|
+
},
|
|
3318
|
+
{
|
|
3319
|
+
"name": "placement",
|
|
3320
|
+
"description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
|
|
3321
|
+
"values": [
|
|
3322
|
+
{ "name": "" },
|
|
3323
|
+
{ "name": "top" },
|
|
3324
|
+
{ "name": "top-start" },
|
|
3325
|
+
{ "name": "top-end" },
|
|
3326
|
+
{ "name": "right" },
|
|
3327
|
+
{ "name": "right-start" },
|
|
3328
|
+
{ "name": "right-end" },
|
|
3329
|
+
{ "name": "bottom" },
|
|
3330
|
+
{ "name": "bottom-start" },
|
|
3331
|
+
{ "name": "bottom-end" },
|
|
3332
|
+
{ "name": "left" },
|
|
3333
|
+
{ "name": "left-start" },
|
|
3334
|
+
{ "name": "left-end" }
|
|
3335
|
+
]
|
|
3336
|
+
},
|
|
3337
|
+
{
|
|
3338
|
+
"name": "disabled",
|
|
3339
|
+
"description": "Disables the tooltip so it won't show when triggered.",
|
|
3340
|
+
"values": []
|
|
3341
|
+
},
|
|
3342
|
+
{
|
|
3343
|
+
"name": "distance",
|
|
3344
|
+
"description": "The distance in pixels from which to offset the tooltip away from its target.",
|
|
3345
|
+
"values": []
|
|
3346
|
+
},
|
|
3347
|
+
{
|
|
3348
|
+
"name": "open",
|
|
3349
|
+
"description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
|
|
3350
|
+
"values": []
|
|
3351
|
+
},
|
|
3352
|
+
{
|
|
3353
|
+
"name": "skidding",
|
|
3354
|
+
"description": "The distance in pixels from which to offset the tooltip along its target.",
|
|
3355
|
+
"values": []
|
|
3356
|
+
},
|
|
3357
|
+
{
|
|
3358
|
+
"name": "trigger",
|
|
3359
|
+
"description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
|
|
3360
|
+
"values": []
|
|
3361
|
+
},
|
|
3362
|
+
{
|
|
3363
|
+
"name": "hoist",
|
|
3364
|
+
"description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
|
|
3365
|
+
"values": []
|
|
3366
|
+
}
|
|
3367
|
+
],
|
|
3368
|
+
"references": []
|
|
3369
|
+
},
|
|
3370
3370
|
{
|
|
3371
3371
|
"name": "flow-ui-tree",
|
|
3372
3372
|
"description": "Trees allow you to display a hierarchical list of selectable [tree items](./flow-ui-tree-item). Items with children can be expanded and collapsed as desired by the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when a tree item is selected or deselected.\n- **flow-ui-change** - Emitted when a tree item is selected or deselected.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded. Works best with `<flow-ui-icon>`.\n- **collapse-icon** - The icon to show when the tree item is collapsed. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--indent-size** - The size of the indentation for nested items. _(default: var(--flow-ui-spacing-medium))_\n- **--indent-guide-color** - The color of the indentation line. _(default: var(--flow-ui-color-neutral-200))_\n- **--indent-guide-offset** - The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position. _(default: 0)_\n- **--indent-guide-style** - The style of the indentation line, e.g. solid, dotted, dashed. _(default: solid)_\n- **--indent-guide-width** - The width of the indentation line. _(default: 0)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|