@emuanalytics/flow-rdf-ui 4.1.14 → 4.1.17
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 +1455 -1471
- package/dist/index.d.mts +4 -7
- package/dist/index.d.ts +4 -7
- package/dist/package.json.mjs +1 -1
- package/dist/vscode.html-custom-data.json +192 -192
- package/package.json +3 -3
package/dist/index.d.mts
CHANGED
|
@@ -4625,7 +4625,7 @@ declare global {
|
|
|
4625
4625
|
|
|
4626
4626
|
/**
|
|
4627
4627
|
* @tagname flow-ui-list-item
|
|
4628
|
-
* @summary A list item.
|
|
4628
|
+
* @summary A list item. Use with `<flow-ui-list>` to create selectable, editable, and reorderable lists.
|
|
4629
4629
|
*
|
|
4630
4630
|
* @dependency flow-ui-input
|
|
4631
4631
|
* @dependency flow-ui-icon
|
|
@@ -4650,11 +4650,6 @@ declare global {
|
|
|
4650
4650
|
* @csspart reorder-icon - The list item's reorder icon.
|
|
4651
4651
|
* @csspart menu-button - The list item's menu-button.
|
|
4652
4652
|
*
|
|
4653
|
-
* @cssproperty padding - The padding around the header. Defaults to `--flow-ui-panel-header-padding`.
|
|
4654
|
-
* @cssproperty header-height - The height of the header. Defaults to `--flow-ui-panel-header-height`.
|
|
4655
|
-
* @cssproperty background-color - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`.
|
|
4656
|
-
* @cssproperty color - The text color of the header. Defaults to `--flow-ui-panel-header-color`.
|
|
4657
|
-
* @cssproperty accessory-color - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`.
|
|
4658
4653
|
*/
|
|
4659
4654
|
declare class FlowUiListItem extends FlowRdfElement {
|
|
4660
4655
|
static styles: CSSResultGroup;
|
|
@@ -4702,7 +4697,7 @@ declare class FlowUiListItem extends FlowRdfElement {
|
|
|
4702
4697
|
|
|
4703
4698
|
/**
|
|
4704
4699
|
* @tagname flow-ui-list
|
|
4705
|
-
* @summary A
|
|
4700
|
+
* @summary A list of items that can be edited and reordered.
|
|
4706
4701
|
*
|
|
4707
4702
|
* @dependency flow-ui-list-item
|
|
4708
4703
|
*
|
|
@@ -4714,6 +4709,8 @@ declare class FlowUiListItem extends FlowRdfElement {
|
|
|
4714
4709
|
* @event flow-ui-drag-drop - Emitted when the user drops a list item to reorder it.
|
|
4715
4710
|
* @event flow-ui-drag-end - Emitted when the drag-drop operation has finished or been cancelled.
|
|
4716
4711
|
*
|
|
4712
|
+
* @csspart base - The component's base wrapper.
|
|
4713
|
+
*
|
|
4717
4714
|
*/
|
|
4718
4715
|
declare class FlowUiList extends FlowRdfElement {
|
|
4719
4716
|
static styles: CSSResultGroup;
|
package/dist/index.d.ts
CHANGED
|
@@ -4625,7 +4625,7 @@ declare global {
|
|
|
4625
4625
|
|
|
4626
4626
|
/**
|
|
4627
4627
|
* @tagname flow-ui-list-item
|
|
4628
|
-
* @summary A list item.
|
|
4628
|
+
* @summary A list item. Use with `<flow-ui-list>` to create selectable, editable, and reorderable lists.
|
|
4629
4629
|
*
|
|
4630
4630
|
* @dependency flow-ui-input
|
|
4631
4631
|
* @dependency flow-ui-icon
|
|
@@ -4650,11 +4650,6 @@ declare global {
|
|
|
4650
4650
|
* @csspart reorder-icon - The list item's reorder icon.
|
|
4651
4651
|
* @csspart menu-button - The list item's menu-button.
|
|
4652
4652
|
*
|
|
4653
|
-
* @cssproperty padding - The padding around the header. Defaults to `--flow-ui-panel-header-padding`.
|
|
4654
|
-
* @cssproperty header-height - The height of the header. Defaults to `--flow-ui-panel-header-height`.
|
|
4655
|
-
* @cssproperty background-color - The background color of the header. Defaults to `--flow-ui-panel-header-background-color`.
|
|
4656
|
-
* @cssproperty color - The text color of the header. Defaults to `--flow-ui-panel-header-color`.
|
|
4657
|
-
* @cssproperty accessory-color - The color of the accessory controls. Defaults to `--flow-ui-panel-header-accessory-color`.
|
|
4658
4653
|
*/
|
|
4659
4654
|
declare class FlowUiListItem extends FlowRdfElement {
|
|
4660
4655
|
static styles: CSSResultGroup;
|
|
@@ -4702,7 +4697,7 @@ declare class FlowUiListItem extends FlowRdfElement {
|
|
|
4702
4697
|
|
|
4703
4698
|
/**
|
|
4704
4699
|
* @tagname flow-ui-list
|
|
4705
|
-
* @summary A
|
|
4700
|
+
* @summary A list of items that can be edited and reordered.
|
|
4706
4701
|
*
|
|
4707
4702
|
* @dependency flow-ui-list-item
|
|
4708
4703
|
*
|
|
@@ -4714,6 +4709,8 @@ declare class FlowUiListItem extends FlowRdfElement {
|
|
|
4714
4709
|
* @event flow-ui-drag-drop - Emitted when the user drops a list item to reorder it.
|
|
4715
4710
|
* @event flow-ui-drag-end - Emitted when the drag-drop operation has finished or been cancelled.
|
|
4716
4711
|
*
|
|
4712
|
+
* @csspart base - The component's base wrapper.
|
|
4713
|
+
*
|
|
4717
4714
|
*/
|
|
4718
4715
|
declare class FlowUiList extends FlowRdfElement {
|
|
4719
4716
|
static styles: CSSResultGroup;
|
package/dist/package.json.mjs
CHANGED
|
@@ -36,74 +36,62 @@
|
|
|
36
36
|
"references": []
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
|
-
"name": "flow-ui-
|
|
40
|
-
"description": "
|
|
39
|
+
"name": "flow-ui-animation",
|
|
40
|
+
"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
41
|
"attributes": [
|
|
42
42
|
{
|
|
43
|
-
"name": "
|
|
44
|
-
"description": "The
|
|
43
|
+
"name": "name",
|
|
44
|
+
"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.",
|
|
45
45
|
"values": []
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
|
-
"name": "
|
|
49
|
-
"description": "
|
|
48
|
+
"name": "play",
|
|
49
|
+
"description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
|
|
50
50
|
"values": []
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
|
-
"name": "
|
|
54
|
-
"description": "
|
|
53
|
+
"name": "delay",
|
|
54
|
+
"description": "The number of milliseconds to delay the start of the animation.",
|
|
55
55
|
"values": []
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
60
|
-
"values": [{ "name": "
|
|
58
|
+
"name": "direction",
|
|
59
|
+
"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)",
|
|
60
|
+
"values": [{ "name": "PlaybackDirection" }]
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
|
-
"name": "
|
|
64
|
-
"description": "The
|
|
65
|
-
"values": [
|
|
66
|
-
|
|
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": [
|
|
63
|
+
"name": "duration",
|
|
64
|
+
"description": "The number of milliseconds each iteration of the animation takes to complete.",
|
|
65
|
+
"values": []
|
|
66
|
+
},
|
|
78
67
|
{
|
|
79
|
-
"name": "
|
|
80
|
-
"description": "The
|
|
81
|
-
"values": [
|
|
82
|
-
{ "name": "primary" },
|
|
83
|
-
{ "name": "secondary" },
|
|
84
|
-
{ "name": "success" },
|
|
85
|
-
{ "name": "neutral" },
|
|
86
|
-
{ "name": "warning" },
|
|
87
|
-
{ "name": "danger" }
|
|
88
|
-
]
|
|
68
|
+
"name": "easing",
|
|
69
|
+
"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)`.",
|
|
70
|
+
"values": []
|
|
89
71
|
},
|
|
90
72
|
{
|
|
91
|
-
"name": "
|
|
92
|
-
"description": "The
|
|
93
|
-
"values": [
|
|
94
|
-
{ "name": "small" },
|
|
95
|
-
{ "name": "medium" },
|
|
96
|
-
{ "name": "large" }
|
|
97
|
-
]
|
|
73
|
+
"name": "end-delay",
|
|
74
|
+
"description": "The number of milliseconds to delay after the active period of an animation sequence.",
|
|
75
|
+
"values": []
|
|
98
76
|
},
|
|
99
77
|
{
|
|
100
|
-
"name": "
|
|
101
|
-
"description": "
|
|
78
|
+
"name": "fill",
|
|
79
|
+
"description": "Sets how the animation applies styles to its target before and after its execution.",
|
|
80
|
+
"values": [{ "name": "FillMode" }]
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"name": "iterations",
|
|
84
|
+
"description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
|
|
102
85
|
"values": []
|
|
103
86
|
},
|
|
104
87
|
{
|
|
105
|
-
"name": "
|
|
106
|
-
"description": "
|
|
88
|
+
"name": "iteration-start",
|
|
89
|
+
"description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
|
|
90
|
+
"values": []
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": "playback-rate",
|
|
94
|
+
"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.",
|
|
107
95
|
"values": []
|
|
108
96
|
}
|
|
109
97
|
],
|
|
@@ -214,74 +202,73 @@
|
|
|
214
202
|
"references": []
|
|
215
203
|
},
|
|
216
204
|
{
|
|
217
|
-
"name": "flow-ui-
|
|
218
|
-
"description": "
|
|
205
|
+
"name": "flow-ui-breadcrumb",
|
|
206
|
+
"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.",
|
|
219
207
|
"attributes": [
|
|
220
208
|
{
|
|
221
|
-
"name": "
|
|
222
|
-
"description": "The
|
|
209
|
+
"name": "label",
|
|
210
|
+
"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.",
|
|
223
211
|
"values": []
|
|
224
|
-
}
|
|
212
|
+
}
|
|
213
|
+
],
|
|
214
|
+
"references": []
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"name": "flow-ui-base-control",
|
|
218
|
+
"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.",
|
|
219
|
+
"attributes": [
|
|
225
220
|
{
|
|
226
|
-
"name": "
|
|
227
|
-
"description": "
|
|
228
|
-
"values": [
|
|
221
|
+
"name": "size",
|
|
222
|
+
"description": "The input's size.",
|
|
223
|
+
"values": [
|
|
224
|
+
{ "name": "small" },
|
|
225
|
+
{ "name": "medium" },
|
|
226
|
+
{ "name": "large" }
|
|
227
|
+
]
|
|
229
228
|
},
|
|
230
229
|
{
|
|
231
|
-
"name": "
|
|
232
|
-
"description": "
|
|
230
|
+
"name": "filled",
|
|
231
|
+
"description": "Draws a filled input.",
|
|
233
232
|
"values": []
|
|
234
233
|
},
|
|
235
234
|
{
|
|
236
|
-
"name": "
|
|
237
|
-
"description": "
|
|
238
|
-
"values": [{ "name": "PlaybackDirection" }]
|
|
239
|
-
},
|
|
240
|
-
{
|
|
241
|
-
"name": "duration",
|
|
242
|
-
"description": "The number of milliseconds each iteration of the animation takes to complete.",
|
|
235
|
+
"name": "pill",
|
|
236
|
+
"description": "Draws a pill-style input with rounded edges.",
|
|
243
237
|
"values": []
|
|
244
238
|
},
|
|
245
239
|
{
|
|
246
|
-
"name": "
|
|
247
|
-
"description": "The
|
|
240
|
+
"name": "label",
|
|
241
|
+
"description": "The input's label. If you need to display HTML, use the `label` slot instead.",
|
|
248
242
|
"values": []
|
|
249
243
|
},
|
|
250
244
|
{
|
|
251
|
-
"name": "
|
|
252
|
-
"description": "The
|
|
245
|
+
"name": "help-text",
|
|
246
|
+
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
253
247
|
"values": []
|
|
254
248
|
},
|
|
255
249
|
{
|
|
256
|
-
"name": "
|
|
257
|
-
"description": "
|
|
258
|
-
"values": [
|
|
250
|
+
"name": "disabled",
|
|
251
|
+
"description": "Disables the input.",
|
|
252
|
+
"values": []
|
|
259
253
|
},
|
|
260
254
|
{
|
|
261
|
-
"name": "
|
|
262
|
-
"description": "
|
|
255
|
+
"name": "form",
|
|
256
|
+
"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.",
|
|
263
257
|
"values": []
|
|
264
258
|
},
|
|
265
259
|
{
|
|
266
|
-
"name": "
|
|
267
|
-
"description": "
|
|
260
|
+
"name": "required",
|
|
261
|
+
"description": "Makes the input a required field.",
|
|
268
262
|
"values": []
|
|
269
263
|
},
|
|
270
264
|
{
|
|
271
|
-
"name": "
|
|
272
|
-
"description": "
|
|
265
|
+
"name": "inline",
|
|
266
|
+
"description": "Display the input in the 'inline' form control style.",
|
|
273
267
|
"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": [
|
|
268
|
+
},
|
|
282
269
|
{
|
|
283
|
-
"name": "
|
|
284
|
-
"description": "
|
|
270
|
+
"name": "divider",
|
|
271
|
+
"description": "Indicates that the control should display a divider",
|
|
285
272
|
"values": []
|
|
286
273
|
}
|
|
287
274
|
],
|
|
@@ -315,13 +302,48 @@
|
|
|
315
302
|
"references": []
|
|
316
303
|
},
|
|
317
304
|
{
|
|
318
|
-
"name": "flow-ui-
|
|
319
|
-
"description": "
|
|
305
|
+
"name": "flow-ui-avatar",
|
|
306
|
+
"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.",
|
|
307
|
+
"attributes": [
|
|
308
|
+
{
|
|
309
|
+
"name": "image",
|
|
310
|
+
"description": "The image source to use for the avatar.",
|
|
311
|
+
"values": []
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
"name": "label",
|
|
315
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
316
|
+
"values": []
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
"name": "initials",
|
|
320
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
321
|
+
"values": []
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"name": "loading",
|
|
325
|
+
"description": "Indicates how the browser should load the image.",
|
|
326
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
"name": "shape",
|
|
330
|
+
"description": "The shape of the avatar.",
|
|
331
|
+
"values": [
|
|
332
|
+
{ "name": "circle" },
|
|
333
|
+
{ "name": "square" },
|
|
334
|
+
{ "name": "rounded" }
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
],
|
|
338
|
+
"references": []
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
"name": "flow-ui-badge",
|
|
342
|
+
"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.",
|
|
320
343
|
"attributes": [
|
|
321
|
-
{ "name": "busy", "values": [] },
|
|
322
344
|
{
|
|
323
345
|
"name": "variant",
|
|
324
|
-
"description": "The
|
|
346
|
+
"description": "The badge's theme variant.",
|
|
325
347
|
"values": [
|
|
326
348
|
{ "name": "primary" },
|
|
327
349
|
{ "name": "secondary" },
|
|
@@ -333,7 +355,7 @@
|
|
|
333
355
|
},
|
|
334
356
|
{
|
|
335
357
|
"name": "size",
|
|
336
|
-
"description": "
|
|
358
|
+
"description": "The badge size.",
|
|
337
359
|
"values": [
|
|
338
360
|
{ "name": "small" },
|
|
339
361
|
{ "name": "medium" },
|
|
@@ -341,20 +363,38 @@
|
|
|
341
363
|
]
|
|
342
364
|
},
|
|
343
365
|
{
|
|
344
|
-
"name": "
|
|
345
|
-
"description": "
|
|
366
|
+
"name": "pill",
|
|
367
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
368
|
+
"values": []
|
|
369
|
+
},
|
|
370
|
+
{
|
|
371
|
+
"name": "pulse",
|
|
372
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
346
373
|
"values": []
|
|
347
374
|
}
|
|
348
375
|
],
|
|
349
376
|
"references": []
|
|
350
377
|
},
|
|
351
378
|
{
|
|
352
|
-
"name": "flow-ui-
|
|
353
|
-
"description": "
|
|
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)_",
|
|
354
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
|
+
},
|
|
355
395
|
{
|
|
356
396
|
"name": "size",
|
|
357
|
-
"description": "
|
|
397
|
+
"description": "Size of the loading animation",
|
|
358
398
|
"values": [
|
|
359
399
|
{ "name": "small" },
|
|
360
400
|
{ "name": "medium" },
|
|
@@ -362,48 +402,8 @@
|
|
|
362
402
|
]
|
|
363
403
|
},
|
|
364
404
|
{
|
|
365
|
-
"name": "
|
|
366
|
-
"description": "
|
|
367
|
-
"values": []
|
|
368
|
-
},
|
|
369
|
-
{
|
|
370
|
-
"name": "pill",
|
|
371
|
-
"description": "Draws a pill-style input with rounded edges.",
|
|
372
|
-
"values": []
|
|
373
|
-
},
|
|
374
|
-
{
|
|
375
|
-
"name": "label",
|
|
376
|
-
"description": "The input's label. If you need to display HTML, use the `label` slot instead.",
|
|
377
|
-
"values": []
|
|
378
|
-
},
|
|
379
|
-
{
|
|
380
|
-
"name": "help-text",
|
|
381
|
-
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
382
|
-
"values": []
|
|
383
|
-
},
|
|
384
|
-
{
|
|
385
|
-
"name": "disabled",
|
|
386
|
-
"description": "Disables the input.",
|
|
387
|
-
"values": []
|
|
388
|
-
},
|
|
389
|
-
{
|
|
390
|
-
"name": "form",
|
|
391
|
-
"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.",
|
|
392
|
-
"values": []
|
|
393
|
-
},
|
|
394
|
-
{
|
|
395
|
-
"name": "required",
|
|
396
|
-
"description": "Makes the input a required field.",
|
|
397
|
-
"values": []
|
|
398
|
-
},
|
|
399
|
-
{
|
|
400
|
-
"name": "inline",
|
|
401
|
-
"description": "Display the input in the 'inline' form control style.",
|
|
402
|
-
"values": []
|
|
403
|
-
},
|
|
404
|
-
{
|
|
405
|
-
"name": "divider",
|
|
406
|
-
"description": "Indicates that the control should display a divider",
|
|
405
|
+
"name": "overlay-parent",
|
|
406
|
+
"description": "To overlay the parent element",
|
|
407
407
|
"values": []
|
|
408
408
|
}
|
|
409
409
|
],
|
|
@@ -1731,7 +1731,7 @@
|
|
|
1731
1731
|
},
|
|
1732
1732
|
{
|
|
1733
1733
|
"name": "flow-ui-list",
|
|
1734
|
-
"description": "A
|
|
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.",
|
|
1735
1735
|
"attributes": [
|
|
1736
1736
|
{
|
|
1737
1737
|
"name": "value",
|
|
@@ -1763,7 +1763,7 @@
|
|
|
1763
1763
|
},
|
|
1764
1764
|
{
|
|
1765
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
|
|
1766
|
+
"description": "A list item. Use with `<flow-ui-list>` to create selectable, editable, and reorderable lists.\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 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.",
|
|
1767
1767
|
"attributes": [
|
|
1768
1768
|
{
|
|
1769
1769
|
"name": "label",
|
|
@@ -2311,6 +2311,57 @@
|
|
|
2311
2311
|
],
|
|
2312
2312
|
"references": []
|
|
2313
2313
|
},
|
|
2314
|
+
{
|
|
2315
|
+
"name": "flow-ui-radio-group",
|
|
2316
|
+
"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.",
|
|
2317
|
+
"attributes": [
|
|
2318
|
+
{
|
|
2319
|
+
"name": "label",
|
|
2320
|
+
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
2321
|
+
"values": []
|
|
2322
|
+
},
|
|
2323
|
+
{
|
|
2324
|
+
"name": "help-text",
|
|
2325
|
+
"description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2326
|
+
"values": []
|
|
2327
|
+
},
|
|
2328
|
+
{
|
|
2329
|
+
"name": "name",
|
|
2330
|
+
"description": "The name of the radio group, submitted as a name/value pair with form data.",
|
|
2331
|
+
"values": []
|
|
2332
|
+
},
|
|
2333
|
+
{
|
|
2334
|
+
"name": "value",
|
|
2335
|
+
"description": "The current value of the radio group, submitted as a name/value pair with form data.",
|
|
2336
|
+
"values": []
|
|
2337
|
+
},
|
|
2338
|
+
{
|
|
2339
|
+
"name": "size",
|
|
2340
|
+
"description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
|
|
2341
|
+
"values": [
|
|
2342
|
+
{ "name": "small" },
|
|
2343
|
+
{ "name": "medium" },
|
|
2344
|
+
{ "name": "large" }
|
|
2345
|
+
]
|
|
2346
|
+
},
|
|
2347
|
+
{
|
|
2348
|
+
"name": "reverse",
|
|
2349
|
+
"description": "Display the radios using a reversed style with left-aligned labels.",
|
|
2350
|
+
"values": []
|
|
2351
|
+
},
|
|
2352
|
+
{
|
|
2353
|
+
"name": "form",
|
|
2354
|
+
"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.",
|
|
2355
|
+
"values": []
|
|
2356
|
+
},
|
|
2357
|
+
{
|
|
2358
|
+
"name": "required",
|
|
2359
|
+
"description": "Ensures a child radio is checked before allowing the containing form to submit.",
|
|
2360
|
+
"values": []
|
|
2361
|
+
}
|
|
2362
|
+
],
|
|
2363
|
+
"references": []
|
|
2364
|
+
},
|
|
2314
2365
|
{
|
|
2315
2366
|
"name": "flow-ui-range",
|
|
2316
2367
|
"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.",
|
|
@@ -2383,57 +2434,6 @@
|
|
|
2383
2434
|
],
|
|
2384
2435
|
"references": []
|
|
2385
2436
|
},
|
|
2386
|
-
{
|
|
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.",
|
|
2389
|
-
"attributes": [
|
|
2390
|
-
{
|
|
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.",
|
|
2393
|
-
"values": []
|
|
2394
|
-
},
|
|
2395
|
-
{
|
|
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": []
|
|
2399
|
-
},
|
|
2400
|
-
{
|
|
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
2437
|
{
|
|
2438
2438
|
"name": "flow-ui-resize-observer",
|
|
2439
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.",
|