@emuanalytics/flow-rdf-ui 4.0.11 → 4.0.13
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.
|
@@ -1,6 +1,69 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 1.1,
|
|
3
3
|
"tags": [
|
|
4
|
+
{
|
|
5
|
+
"name": "flow-ui-alert",
|
|
6
|
+
"description": "Alerts are used to display important messages inline or as toast notifications.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the alert opens.\n- **flow-ui-after-show** - Emitted after the alert opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the alert closes.\n- **flow-ui-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast(): _Promise<void>_** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
|
|
7
|
+
"attributes": [
|
|
8
|
+
{
|
|
9
|
+
"name": "open",
|
|
10
|
+
"description": "Set to `true` to display the alert. You can also\nuse the `show()` and `hide()` methods.",
|
|
11
|
+
"values": []
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"name": "closable",
|
|
15
|
+
"description": "Enables a close button that allows the user to dismiss the alert.",
|
|
16
|
+
"values": []
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "variant",
|
|
20
|
+
"description": "The alert's theme variant.",
|
|
21
|
+
"values": [
|
|
22
|
+
{ "name": "primary" },
|
|
23
|
+
{ "name": "secondary" },
|
|
24
|
+
{ "name": "success" },
|
|
25
|
+
{ "name": "neutral" },
|
|
26
|
+
{ "name": "warning" },
|
|
27
|
+
{ "name": "danger" }
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "duration",
|
|
32
|
+
"description": "The length of time (in ms) that the alert will show itself before closing. If the user interacts with\nthe alert before it closes (e.g. by moving the mouse over it), the timer will restart.",
|
|
33
|
+
"values": []
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"references": []
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name": "flow-ui-badge",
|
|
40
|
+
"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.",
|
|
41
|
+
"attributes": [
|
|
42
|
+
{
|
|
43
|
+
"name": "variant",
|
|
44
|
+
"description": "The badge's theme variant.",
|
|
45
|
+
"values": [
|
|
46
|
+
{ "name": "primary" },
|
|
47
|
+
{ "name": "secondary" },
|
|
48
|
+
{ "name": "success" },
|
|
49
|
+
{ "name": "neutral" },
|
|
50
|
+
{ "name": "warning" },
|
|
51
|
+
{ "name": "danger" }
|
|
52
|
+
]
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "pill",
|
|
56
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
57
|
+
"values": []
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "pulse",
|
|
61
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
62
|
+
"values": []
|
|
63
|
+
}
|
|
64
|
+
],
|
|
65
|
+
"references": []
|
|
66
|
+
},
|
|
4
67
|
{
|
|
5
68
|
"name": "flow-ui-animation",
|
|
6
69
|
"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.",
|
|
@@ -64,103 +127,104 @@
|
|
|
64
127
|
"references": []
|
|
65
128
|
},
|
|
66
129
|
{
|
|
67
|
-
"name": "flow-ui-
|
|
68
|
-
"description": "
|
|
130
|
+
"name": "flow-ui-breadcrumb-item",
|
|
131
|
+
"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.",
|
|
69
132
|
"attributes": [
|
|
70
133
|
{
|
|
71
|
-
"name": "
|
|
72
|
-
"description": "
|
|
73
|
-
"values": [
|
|
74
|
-
{ "name": "primary" },
|
|
75
|
-
{ "name": "secondary" },
|
|
76
|
-
{ "name": "success" },
|
|
77
|
-
{ "name": "neutral" },
|
|
78
|
-
{ "name": "warning" },
|
|
79
|
-
{ "name": "danger" }
|
|
80
|
-
]
|
|
134
|
+
"name": "href",
|
|
135
|
+
"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.",
|
|
136
|
+
"values": []
|
|
81
137
|
},
|
|
82
138
|
{
|
|
83
|
-
"name": "
|
|
84
|
-
"description": "
|
|
85
|
-
"values": [
|
|
139
|
+
"name": "target",
|
|
140
|
+
"description": "Tells the browser where to open the link. Only used when `href` is set.",
|
|
141
|
+
"values": [
|
|
142
|
+
{ "name": "_blank" },
|
|
143
|
+
{ "name": "_parent" },
|
|
144
|
+
{ "name": "_self" },
|
|
145
|
+
{ "name": "_top" }
|
|
146
|
+
]
|
|
86
147
|
},
|
|
87
148
|
{
|
|
88
|
-
"name": "
|
|
89
|
-
"description": "
|
|
149
|
+
"name": "rel",
|
|
150
|
+
"description": "The `rel` attribute to use on the link. Only used when `href` is set.",
|
|
90
151
|
"values": []
|
|
91
152
|
}
|
|
92
153
|
],
|
|
93
154
|
"references": []
|
|
94
155
|
},
|
|
95
156
|
{
|
|
96
|
-
"name": "flow-ui-
|
|
97
|
-
"description": "
|
|
157
|
+
"name": "flow-ui-avatar",
|
|
158
|
+
"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.",
|
|
98
159
|
"attributes": [
|
|
99
160
|
{
|
|
100
|
-
"name": "
|
|
101
|
-
"description": "
|
|
161
|
+
"name": "image",
|
|
162
|
+
"description": "The image source to use for the avatar.",
|
|
102
163
|
"values": []
|
|
103
164
|
},
|
|
104
165
|
{
|
|
105
|
-
"name": "
|
|
106
|
-
"description": "
|
|
166
|
+
"name": "label",
|
|
167
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
107
168
|
"values": []
|
|
108
169
|
},
|
|
109
170
|
{
|
|
110
|
-
"name": "
|
|
111
|
-
"description": "
|
|
112
|
-
"values": [
|
|
113
|
-
{ "name": "primary" },
|
|
114
|
-
{ "name": "secondary" },
|
|
115
|
-
{ "name": "success" },
|
|
116
|
-
{ "name": "neutral" },
|
|
117
|
-
{ "name": "warning" },
|
|
118
|
-
{ "name": "danger" }
|
|
119
|
-
]
|
|
171
|
+
"name": "initials",
|
|
172
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
173
|
+
"values": []
|
|
120
174
|
},
|
|
121
175
|
{
|
|
122
|
-
"name": "
|
|
123
|
-
"description": "
|
|
124
|
-
"values": []
|
|
125
|
-
}
|
|
126
|
-
],
|
|
127
|
-
"references": []
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
"name": "flow-ui-breadcrumb",
|
|
131
|
-
"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.",
|
|
132
|
-
"attributes": [
|
|
176
|
+
"name": "loading",
|
|
177
|
+
"description": "Indicates how the browser should load the image.",
|
|
178
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
179
|
+
},
|
|
133
180
|
{
|
|
134
|
-
"name": "
|
|
135
|
-
"description": "The
|
|
136
|
-
"values": [
|
|
181
|
+
"name": "shape",
|
|
182
|
+
"description": "The shape of the avatar.",
|
|
183
|
+
"values": [
|
|
184
|
+
{ "name": "circle" },
|
|
185
|
+
{ "name": "square" },
|
|
186
|
+
{ "name": "rounded" }
|
|
187
|
+
]
|
|
137
188
|
}
|
|
138
189
|
],
|
|
139
190
|
"references": []
|
|
140
191
|
},
|
|
141
192
|
{
|
|
142
|
-
"name": "flow-ui-
|
|
143
|
-
"description": "
|
|
193
|
+
"name": "flow-ui-calendar",
|
|
194
|
+
"description": "A calendar component for selecting dates and times.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the calendar value changes.\n- **flow-ui-change** - Emitted when the calendar value changes.\n\n### **CSS Properties:**\n - **--width** - The width of the calendar in CSS units. Set automatically if `size` is set. _(default: undefined)_\n- **--font-size** - The font size of the calendar. Set automatically if `size` is set. _(default: undefined)_\n- **--day-font-size** - The font size of the day labels. Set automatically if `size` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
144
195
|
"attributes": [
|
|
145
196
|
{
|
|
146
|
-
"name": "
|
|
147
|
-
"description": "
|
|
197
|
+
"name": "value",
|
|
198
|
+
"description": "The value of the control. (ISO8601 date/time string)",
|
|
148
199
|
"values": []
|
|
149
200
|
},
|
|
150
201
|
{
|
|
151
|
-
"name": "
|
|
152
|
-
"description": "
|
|
202
|
+
"name": "display-mode",
|
|
203
|
+
"description": "Select whether to show date only, time only or both date and time.",
|
|
153
204
|
"values": [
|
|
154
|
-
{ "name": "
|
|
155
|
-
{ "name": "
|
|
156
|
-
{ "name": "
|
|
157
|
-
{ "name": "_top" }
|
|
205
|
+
{ "name": "date" },
|
|
206
|
+
{ "name": "time" },
|
|
207
|
+
{ "name": "datetime" }
|
|
158
208
|
]
|
|
159
209
|
},
|
|
160
210
|
{
|
|
161
|
-
"name": "
|
|
162
|
-
"description": "
|
|
211
|
+
"name": "timezone",
|
|
212
|
+
"description": "Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`)",
|
|
163
213
|
"values": []
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
"name": "locale",
|
|
217
|
+
"description": "Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`)",
|
|
218
|
+
"values": []
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"name": "size",
|
|
222
|
+
"description": "Set the size of the calendar.",
|
|
223
|
+
"values": [
|
|
224
|
+
{ "name": "small" },
|
|
225
|
+
{ "name": "medium" },
|
|
226
|
+
{ "name": "large" }
|
|
227
|
+
]
|
|
164
228
|
}
|
|
165
229
|
],
|
|
166
230
|
"references": []
|
|
@@ -333,77 +397,13 @@
|
|
|
333
397
|
"references": []
|
|
334
398
|
},
|
|
335
399
|
{
|
|
336
|
-
"name": "flow-ui-
|
|
337
|
-
"description": "
|
|
400
|
+
"name": "flow-ui-breadcrumb",
|
|
401
|
+
"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.",
|
|
338
402
|
"attributes": [
|
|
339
|
-
{
|
|
340
|
-
"name": "image",
|
|
341
|
-
"description": "The image source to use for the avatar.",
|
|
342
|
-
"values": []
|
|
343
|
-
},
|
|
344
403
|
{
|
|
345
404
|
"name": "label",
|
|
346
|
-
"description": "
|
|
347
|
-
"values": []
|
|
348
|
-
},
|
|
349
|
-
{
|
|
350
|
-
"name": "initials",
|
|
351
|
-
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
352
|
-
"values": []
|
|
353
|
-
},
|
|
354
|
-
{
|
|
355
|
-
"name": "loading",
|
|
356
|
-
"description": "Indicates how the browser should load the image.",
|
|
357
|
-
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
358
|
-
},
|
|
359
|
-
{
|
|
360
|
-
"name": "shape",
|
|
361
|
-
"description": "The shape of the avatar.",
|
|
362
|
-
"values": [
|
|
363
|
-
{ "name": "circle" },
|
|
364
|
-
{ "name": "square" },
|
|
365
|
-
{ "name": "rounded" }
|
|
366
|
-
]
|
|
367
|
-
}
|
|
368
|
-
],
|
|
369
|
-
"references": []
|
|
370
|
-
},
|
|
371
|
-
{
|
|
372
|
-
"name": "flow-ui-calendar",
|
|
373
|
-
"description": "A calendar component for selecting dates and times.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the calendar value changes.\n- **flow-ui-change** - Emitted when the calendar value changes.\n\n### **CSS Properties:**\n - **--width** - The width of the calendar in CSS units. Set automatically if `size` is set. _(default: undefined)_\n- **--font-size** - The font size of the calendar. Set automatically if `size` is set. _(default: undefined)_\n- **--day-font-size** - The font size of the day labels. Set automatically if `size` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
374
|
-
"attributes": [
|
|
375
|
-
{
|
|
376
|
-
"name": "value",
|
|
377
|
-
"description": "The value of the control. (ISO8601 date/time string)",
|
|
378
|
-
"values": []
|
|
379
|
-
},
|
|
380
|
-
{
|
|
381
|
-
"name": "display-mode",
|
|
382
|
-
"description": "Select whether to show date only, time only or both date and time.",
|
|
383
|
-
"values": [
|
|
384
|
-
{ "name": "date" },
|
|
385
|
-
{ "name": "time" },
|
|
386
|
-
{ "name": "datetime" }
|
|
387
|
-
]
|
|
388
|
-
},
|
|
389
|
-
{
|
|
390
|
-
"name": "timezone",
|
|
391
|
-
"description": "Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`)",
|
|
392
|
-
"values": []
|
|
393
|
-
},
|
|
394
|
-
{
|
|
395
|
-
"name": "locale",
|
|
396
|
-
"description": "Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`)",
|
|
405
|
+
"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.",
|
|
397
406
|
"values": []
|
|
398
|
-
},
|
|
399
|
-
{
|
|
400
|
-
"name": "size",
|
|
401
|
-
"description": "Set the size of the calendar.",
|
|
402
|
-
"values": [
|
|
403
|
-
{ "name": "small" },
|
|
404
|
-
{ "name": "medium" },
|
|
405
|
-
{ "name": "large" }
|
|
406
|
-
]
|
|
407
407
|
}
|
|
408
408
|
],
|
|
409
409
|
"references": []
|
|
@@ -588,8 +588,123 @@
|
|
|
588
588
|
"references": []
|
|
589
589
|
},
|
|
590
590
|
{
|
|
591
|
-
"name": "flow-ui-color-
|
|
592
|
-
"description": "
|
|
591
|
+
"name": "flow-ui-color-picker",
|
|
592
|
+
"description": "Color pickers allow the user to select a color.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the color picker loses focus.\n- **flow-ui-change** - Emitted when the color picker's value changes.\n- **flow-ui-focus** - Emitted when the color picker receives focus.\n- **flow-ui-input** - Emitted when the color picker 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 color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\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 color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
|
|
593
|
+
"attributes": [
|
|
594
|
+
{
|
|
595
|
+
"name": "value",
|
|
596
|
+
"description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
|
|
597
|
+
"values": []
|
|
598
|
+
},
|
|
599
|
+
{
|
|
600
|
+
"name": "label",
|
|
601
|
+
"description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
|
|
602
|
+
"values": []
|
|
603
|
+
},
|
|
604
|
+
{
|
|
605
|
+
"name": "format",
|
|
606
|
+
"description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
|
|
607
|
+
"values": [
|
|
608
|
+
{ "name": "hex" },
|
|
609
|
+
{ "name": "rgb" },
|
|
610
|
+
{ "name": "hsl" },
|
|
611
|
+
{ "name": "hsv" }
|
|
612
|
+
]
|
|
613
|
+
},
|
|
614
|
+
{
|
|
615
|
+
"name": "inline",
|
|
616
|
+
"description": "Renders the color picker inline rather than in a dropdown.",
|
|
617
|
+
"values": []
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"name": "size",
|
|
621
|
+
"description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
|
|
622
|
+
"values": [
|
|
623
|
+
{ "name": "small" },
|
|
624
|
+
{ "name": "medium" },
|
|
625
|
+
{ "name": "large" }
|
|
626
|
+
]
|
|
627
|
+
},
|
|
628
|
+
{
|
|
629
|
+
"name": "no-format-toggle",
|
|
630
|
+
"description": "Removes the button that lets users toggle between format.",
|
|
631
|
+
"values": []
|
|
632
|
+
},
|
|
633
|
+
{
|
|
634
|
+
"name": "name",
|
|
635
|
+
"description": "The name of the form control, submitted as a name/value pair with form data.",
|
|
636
|
+
"values": []
|
|
637
|
+
},
|
|
638
|
+
{
|
|
639
|
+
"name": "disabled",
|
|
640
|
+
"description": "Disables the color picker.",
|
|
641
|
+
"values": []
|
|
642
|
+
},
|
|
643
|
+
{
|
|
644
|
+
"name": "placement",
|
|
645
|
+
"description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
|
|
646
|
+
"values": [
|
|
647
|
+
{ "name": "" },
|
|
648
|
+
{ "name": "top" },
|
|
649
|
+
{ "name": "top-start" },
|
|
650
|
+
{ "name": "top-end" },
|
|
651
|
+
{ "name": "bottom" },
|
|
652
|
+
{ "name": "bottom-start" },
|
|
653
|
+
{ "name": "bottom-end" },
|
|
654
|
+
{ "name": "right" },
|
|
655
|
+
{ "name": "right-start" },
|
|
656
|
+
{ "name": "right-end" },
|
|
657
|
+
{ "name": "left" },
|
|
658
|
+
{ "name": "left-start" },
|
|
659
|
+
{ "name": "left-end" }
|
|
660
|
+
]
|
|
661
|
+
},
|
|
662
|
+
{
|
|
663
|
+
"name": "distance",
|
|
664
|
+
"description": "The distance in pixels from which to offset the panel away from its trigger.",
|
|
665
|
+
"values": []
|
|
666
|
+
},
|
|
667
|
+
{
|
|
668
|
+
"name": "skidding",
|
|
669
|
+
"description": "The distance in pixels from which to offset the panel along its trigger.",
|
|
670
|
+
"values": []
|
|
671
|
+
},
|
|
672
|
+
{
|
|
673
|
+
"name": "hoist",
|
|
674
|
+
"description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
|
|
675
|
+
"values": []
|
|
676
|
+
},
|
|
677
|
+
{
|
|
678
|
+
"name": "opacity",
|
|
679
|
+
"description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
|
|
680
|
+
"values": []
|
|
681
|
+
},
|
|
682
|
+
{
|
|
683
|
+
"name": "uppercase",
|
|
684
|
+
"description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
|
|
685
|
+
"values": []
|
|
686
|
+
},
|
|
687
|
+
{
|
|
688
|
+
"name": "swatches",
|
|
689
|
+
"description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
|
|
690
|
+
"values": [{ "name": "string[]" }]
|
|
691
|
+
},
|
|
692
|
+
{
|
|
693
|
+
"name": "form",
|
|
694
|
+
"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.",
|
|
695
|
+
"values": []
|
|
696
|
+
},
|
|
697
|
+
{
|
|
698
|
+
"name": "required",
|
|
699
|
+
"description": "Makes the color picker a required field.",
|
|
700
|
+
"values": []
|
|
701
|
+
}
|
|
702
|
+
],
|
|
703
|
+
"references": []
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"name": "flow-ui-color-stop",
|
|
707
|
+
"description": "A single color stop used by the `flow-ui-color-mapper` component.\n\n\n---\n\n\n\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()** - 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.",
|
|
593
708
|
"attributes": [
|
|
594
709
|
{
|
|
595
710
|
"name": "name",
|
|
@@ -760,121 +875,6 @@
|
|
|
760
875
|
],
|
|
761
876
|
"references": []
|
|
762
877
|
},
|
|
763
|
-
{
|
|
764
|
-
"name": "flow-ui-color-picker",
|
|
765
|
-
"description": "Color pickers allow the user to select a color.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the color picker loses focus.\n- **flow-ui-change** - Emitted when the color picker's value changes.\n- **flow-ui-focus** - Emitted when the color picker receives focus.\n- **flow-ui-input** - Emitted when the color picker 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 color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\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 color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
|
|
766
|
-
"attributes": [
|
|
767
|
-
{
|
|
768
|
-
"name": "value",
|
|
769
|
-
"description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
|
|
770
|
-
"values": []
|
|
771
|
-
},
|
|
772
|
-
{
|
|
773
|
-
"name": "label",
|
|
774
|
-
"description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
|
|
775
|
-
"values": []
|
|
776
|
-
},
|
|
777
|
-
{
|
|
778
|
-
"name": "format",
|
|
779
|
-
"description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
|
|
780
|
-
"values": [
|
|
781
|
-
{ "name": "hex" },
|
|
782
|
-
{ "name": "rgb" },
|
|
783
|
-
{ "name": "hsl" },
|
|
784
|
-
{ "name": "hsv" }
|
|
785
|
-
]
|
|
786
|
-
},
|
|
787
|
-
{
|
|
788
|
-
"name": "inline",
|
|
789
|
-
"description": "Renders the color picker inline rather than in a dropdown.",
|
|
790
|
-
"values": []
|
|
791
|
-
},
|
|
792
|
-
{
|
|
793
|
-
"name": "size",
|
|
794
|
-
"description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
|
|
795
|
-
"values": [
|
|
796
|
-
{ "name": "small" },
|
|
797
|
-
{ "name": "medium" },
|
|
798
|
-
{ "name": "large" }
|
|
799
|
-
]
|
|
800
|
-
},
|
|
801
|
-
{
|
|
802
|
-
"name": "no-format-toggle",
|
|
803
|
-
"description": "Removes the button that lets users toggle between format.",
|
|
804
|
-
"values": []
|
|
805
|
-
},
|
|
806
|
-
{
|
|
807
|
-
"name": "name",
|
|
808
|
-
"description": "The name of the form control, submitted as a name/value pair with form data.",
|
|
809
|
-
"values": []
|
|
810
|
-
},
|
|
811
|
-
{
|
|
812
|
-
"name": "disabled",
|
|
813
|
-
"description": "Disables the color picker.",
|
|
814
|
-
"values": []
|
|
815
|
-
},
|
|
816
|
-
{
|
|
817
|
-
"name": "placement",
|
|
818
|
-
"description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
|
|
819
|
-
"values": [
|
|
820
|
-
{ "name": "" },
|
|
821
|
-
{ "name": "top" },
|
|
822
|
-
{ "name": "top-start" },
|
|
823
|
-
{ "name": "top-end" },
|
|
824
|
-
{ "name": "bottom" },
|
|
825
|
-
{ "name": "bottom-start" },
|
|
826
|
-
{ "name": "bottom-end" },
|
|
827
|
-
{ "name": "right" },
|
|
828
|
-
{ "name": "right-start" },
|
|
829
|
-
{ "name": "right-end" },
|
|
830
|
-
{ "name": "left" },
|
|
831
|
-
{ "name": "left-start" },
|
|
832
|
-
{ "name": "left-end" }
|
|
833
|
-
]
|
|
834
|
-
},
|
|
835
|
-
{
|
|
836
|
-
"name": "distance",
|
|
837
|
-
"description": "The distance in pixels from which to offset the panel away from its trigger.",
|
|
838
|
-
"values": []
|
|
839
|
-
},
|
|
840
|
-
{
|
|
841
|
-
"name": "skidding",
|
|
842
|
-
"description": "The distance in pixels from which to offset the panel along its trigger.",
|
|
843
|
-
"values": []
|
|
844
|
-
},
|
|
845
|
-
{
|
|
846
|
-
"name": "hoist",
|
|
847
|
-
"description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
|
|
848
|
-
"values": []
|
|
849
|
-
},
|
|
850
|
-
{
|
|
851
|
-
"name": "opacity",
|
|
852
|
-
"description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
|
|
853
|
-
"values": []
|
|
854
|
-
},
|
|
855
|
-
{
|
|
856
|
-
"name": "uppercase",
|
|
857
|
-
"description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
|
|
858
|
-
"values": []
|
|
859
|
-
},
|
|
860
|
-
{
|
|
861
|
-
"name": "swatches",
|
|
862
|
-
"description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
|
|
863
|
-
"values": [{ "name": "string[]" }]
|
|
864
|
-
},
|
|
865
|
-
{
|
|
866
|
-
"name": "form",
|
|
867
|
-
"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.",
|
|
868
|
-
"values": []
|
|
869
|
-
},
|
|
870
|
-
{
|
|
871
|
-
"name": "required",
|
|
872
|
-
"description": "Makes the color picker a required field.",
|
|
873
|
-
"values": []
|
|
874
|
-
}
|
|
875
|
-
],
|
|
876
|
-
"references": []
|
|
877
|
-
},
|
|
878
878
|
{
|
|
879
879
|
"name": "flow-ui-details",
|
|
880
880
|
"description": "Details show a brief summary and expand to show additional content.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the details opens.\n- **flow-ui-after-show** - Emitted after the details opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the details closes.\n- **flow-ui-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<flow-ui-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.",
|
|
@@ -2401,6 +2401,28 @@
|
|
|
2401
2401
|
],
|
|
2402
2402
|
"references": []
|
|
2403
2403
|
},
|
|
2404
|
+
{
|
|
2405
|
+
"name": "flow-ui-tab-panel",
|
|
2406
|
+
"description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
2407
|
+
"attributes": [
|
|
2408
|
+
{
|
|
2409
|
+
"name": "name",
|
|
2410
|
+
"description": "The tab panel's name.",
|
|
2411
|
+
"values": []
|
|
2412
|
+
},
|
|
2413
|
+
{
|
|
2414
|
+
"name": "active",
|
|
2415
|
+
"description": "When true, the tab panel will be shown.",
|
|
2416
|
+
"values": []
|
|
2417
|
+
},
|
|
2418
|
+
{
|
|
2419
|
+
"name": "scrollable",
|
|
2420
|
+
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
2421
|
+
"values": []
|
|
2422
|
+
}
|
|
2423
|
+
],
|
|
2424
|
+
"references": []
|
|
2425
|
+
},
|
|
2404
2426
|
{
|
|
2405
2427
|
"name": "flow-ui-tag",
|
|
2406
2428
|
"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.",
|
|
@@ -2590,6 +2612,80 @@
|
|
|
2590
2612
|
],
|
|
2591
2613
|
"references": []
|
|
2592
2614
|
},
|
|
2615
|
+
{
|
|
2616
|
+
"name": "flow-ui-timer",
|
|
2617
|
+
"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.",
|
|
2618
|
+
"attributes": [
|
|
2619
|
+
{
|
|
2620
|
+
"name": "value",
|
|
2621
|
+
"description": "The value of the timer. (ISO8601 date/time string)",
|
|
2622
|
+
"values": []
|
|
2623
|
+
},
|
|
2624
|
+
{
|
|
2625
|
+
"name": "timezone",
|
|
2626
|
+
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
2627
|
+
"values": []
|
|
2628
|
+
},
|
|
2629
|
+
{
|
|
2630
|
+
"name": "locale",
|
|
2631
|
+
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
2632
|
+
"values": []
|
|
2633
|
+
},
|
|
2634
|
+
{
|
|
2635
|
+
"name": "running",
|
|
2636
|
+
"description": "Set to `true` to start the timer running.",
|
|
2637
|
+
"values": []
|
|
2638
|
+
},
|
|
2639
|
+
{
|
|
2640
|
+
"name": "dateFormat",
|
|
2641
|
+
"description": "The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2642
|
+
"values": []
|
|
2643
|
+
},
|
|
2644
|
+
{
|
|
2645
|
+
"name": "dayFormat",
|
|
2646
|
+
"description": "The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2647
|
+
"values": []
|
|
2648
|
+
},
|
|
2649
|
+
{
|
|
2650
|
+
"name": "timeFormat",
|
|
2651
|
+
"description": "The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2652
|
+
"values": []
|
|
2653
|
+
},
|
|
2654
|
+
{
|
|
2655
|
+
"name": "zoneFormat",
|
|
2656
|
+
"description": "The timezone format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2657
|
+
"values": []
|
|
2658
|
+
},
|
|
2659
|
+
{
|
|
2660
|
+
"name": "major-step",
|
|
2661
|
+
"description": "The major step size to use for the timer step controls.",
|
|
2662
|
+
"values": []
|
|
2663
|
+
},
|
|
2664
|
+
{
|
|
2665
|
+
"name": "minor-step",
|
|
2666
|
+
"description": "The minor step size to use for the timer step controls.",
|
|
2667
|
+
"values": []
|
|
2668
|
+
},
|
|
2669
|
+
{
|
|
2670
|
+
"name": "hide-zone",
|
|
2671
|
+
"description": "Set to `true` to hide the timezone display.",
|
|
2672
|
+
"values": []
|
|
2673
|
+
},
|
|
2674
|
+
{
|
|
2675
|
+
"name": "placement",
|
|
2676
|
+
"description": "The placement of the calendar popup relative to the timer control.",
|
|
2677
|
+
"values": [
|
|
2678
|
+
{ "name": "top" },
|
|
2679
|
+
{ "name": "top-end" },
|
|
2680
|
+
{ "name": "top-start" },
|
|
2681
|
+
{ "name": "bottom" },
|
|
2682
|
+
{ "name": "bottom-start" },
|
|
2683
|
+
{ "name": "bottom-end" }
|
|
2684
|
+
]
|
|
2685
|
+
}
|
|
2686
|
+
],
|
|
2687
|
+
"references": []
|
|
2688
|
+
},
|
|
2593
2689
|
{
|
|
2594
2690
|
"name": "flow-ui-tool-button",
|
|
2595
2691
|
"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.",
|
|
@@ -2688,97 +2784,68 @@
|
|
|
2688
2784
|
"references": []
|
|
2689
2785
|
},
|
|
2690
2786
|
{
|
|
2691
|
-
"name": "flow-ui-
|
|
2692
|
-
"description": "
|
|
2787
|
+
"name": "flow-ui-tool-button-group",
|
|
2788
|
+
"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.",
|
|
2693
2789
|
"attributes": [
|
|
2694
2790
|
{
|
|
2695
|
-
"name": "
|
|
2696
|
-
"description": "The
|
|
2791
|
+
"name": "label",
|
|
2792
|
+
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
2697
2793
|
"values": []
|
|
2698
2794
|
},
|
|
2699
2795
|
{
|
|
2700
|
-
"name": "
|
|
2701
|
-
"description": "
|
|
2796
|
+
"name": "name",
|
|
2797
|
+
"description": "The name of the tool button group, submitted as a name/value pair with form data.",
|
|
2702
2798
|
"values": []
|
|
2703
2799
|
},
|
|
2704
|
-
{
|
|
2705
|
-
"name": "scrollable",
|
|
2706
|
-
"description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
|
|
2707
|
-
"values": []
|
|
2708
|
-
}
|
|
2709
|
-
],
|
|
2710
|
-
"references": []
|
|
2711
|
-
},
|
|
2712
|
-
{
|
|
2713
|
-
"name": "flow-ui-timer",
|
|
2714
|
-
"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.",
|
|
2715
|
-
"attributes": [
|
|
2716
2800
|
{
|
|
2717
2801
|
"name": "value",
|
|
2718
|
-
"description": "The value of the
|
|
2719
|
-
"values": []
|
|
2720
|
-
},
|
|
2721
|
-
{
|
|
2722
|
-
"name": "timezone",
|
|
2723
|
-
"description": "The timezone to use for display. (IANA timezone string).\nIf not set, the timezone will be the browser's local timezone.",
|
|
2724
|
-
"values": []
|
|
2725
|
-
},
|
|
2726
|
-
{
|
|
2727
|
-
"name": "locale",
|
|
2728
|
-
"description": "The locale to use for display. (IETF BCP 47 language tag).\nIf not set, the locale will be the browser's default locale.",
|
|
2729
|
-
"values": []
|
|
2730
|
-
},
|
|
2731
|
-
{
|
|
2732
|
-
"name": "running",
|
|
2733
|
-
"description": "Set to `true` to start the timer running.",
|
|
2734
|
-
"values": []
|
|
2735
|
-
},
|
|
2736
|
-
{
|
|
2737
|
-
"name": "dateFormat",
|
|
2738
|
-
"description": "The date format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2739
|
-
"values": []
|
|
2802
|
+
"description": "The current value of the tool button group, submitted as a name/value pair with form data. When `checkbox` mode is enabled, the\nvalue will be a space-delimited list of values based on the checked tool buttons.",
|
|
2803
|
+
"values": [{ "name": "string[]" }]
|
|
2740
2804
|
},
|
|
2741
2805
|
{
|
|
2742
|
-
"name": "
|
|
2743
|
-
"description": "The
|
|
2744
|
-
"values": [
|
|
2806
|
+
"name": "size",
|
|
2807
|
+
"description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
|
|
2808
|
+
"values": [
|
|
2809
|
+
{ "name": "x-small" },
|
|
2810
|
+
{ "name": "small" },
|
|
2811
|
+
{ "name": "medium" },
|
|
2812
|
+
{ "name": "large" }
|
|
2813
|
+
]
|
|
2745
2814
|
},
|
|
2746
2815
|
{
|
|
2747
|
-
"name": "
|
|
2748
|
-
"description": "
|
|
2816
|
+
"name": "pill",
|
|
2817
|
+
"description": "Draws pill-style tool buttons. This style will be applied to all child tool buttons.",
|
|
2749
2818
|
"values": []
|
|
2750
2819
|
},
|
|
2751
2820
|
{
|
|
2752
|
-
"name": "
|
|
2753
|
-
"description": "
|
|
2821
|
+
"name": "outline",
|
|
2822
|
+
"description": "Draws outline-style tool buttons. This style will be applied to all child tool buttons.",
|
|
2754
2823
|
"values": []
|
|
2755
2824
|
},
|
|
2756
2825
|
{
|
|
2757
|
-
"name": "
|
|
2758
|
-
"
|
|
2759
|
-
|
|
2826
|
+
"name": "variant",
|
|
2827
|
+
"values": [
|
|
2828
|
+
{ "name": "primary" },
|
|
2829
|
+
{ "name": "secondary" },
|
|
2830
|
+
{ "name": "success" },
|
|
2831
|
+
{ "name": "warning" },
|
|
2832
|
+
{ "name": "danger" },
|
|
2833
|
+
{ "name": "neutral" }
|
|
2834
|
+
]
|
|
2760
2835
|
},
|
|
2761
2836
|
{
|
|
2762
|
-
"name": "
|
|
2763
|
-
"description": "
|
|
2837
|
+
"name": "form",
|
|
2838
|
+
"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.",
|
|
2764
2839
|
"values": []
|
|
2765
2840
|
},
|
|
2766
2841
|
{
|
|
2767
|
-
"name": "
|
|
2768
|
-
"description": "
|
|
2842
|
+
"name": "vertical",
|
|
2843
|
+
"description": "Use vertical layout for the radio group.",
|
|
2769
2844
|
"values": []
|
|
2770
2845
|
},
|
|
2771
2846
|
{
|
|
2772
|
-
"name": "
|
|
2773
|
-
"
|
|
2774
|
-
"values": [
|
|
2775
|
-
{ "name": "top" },
|
|
2776
|
-
{ "name": "top-end" },
|
|
2777
|
-
{ "name": "top-start" },
|
|
2778
|
-
{ "name": "bottom" },
|
|
2779
|
-
{ "name": "bottom-start" },
|
|
2780
|
-
{ "name": "bottom-end" }
|
|
2781
|
-
]
|
|
2847
|
+
"name": "mode",
|
|
2848
|
+
"values": [{ "name": "radio" }, { "name": "checkbox" }]
|
|
2782
2849
|
}
|
|
2783
2850
|
],
|
|
2784
2851
|
"references": []
|
|
@@ -2915,73 +2982,6 @@
|
|
|
2915
2982
|
],
|
|
2916
2983
|
"references": []
|
|
2917
2984
|
},
|
|
2918
|
-
{
|
|
2919
|
-
"name": "flow-ui-tool-button-group",
|
|
2920
|
-
"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.",
|
|
2921
|
-
"attributes": [
|
|
2922
|
-
{
|
|
2923
|
-
"name": "label",
|
|
2924
|
-
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
2925
|
-
"values": []
|
|
2926
|
-
},
|
|
2927
|
-
{
|
|
2928
|
-
"name": "name",
|
|
2929
|
-
"description": "The name of the tool button group, submitted as a name/value pair with form data.",
|
|
2930
|
-
"values": []
|
|
2931
|
-
},
|
|
2932
|
-
{
|
|
2933
|
-
"name": "value",
|
|
2934
|
-
"description": "The current value of the tool button group, submitted as a name/value pair with form data. When `checkbox` mode is enabled, the\nvalue will be a space-delimited list of values based on the checked tool buttons.",
|
|
2935
|
-
"values": [{ "name": "string[]" }]
|
|
2936
|
-
},
|
|
2937
|
-
{
|
|
2938
|
-
"name": "size",
|
|
2939
|
-
"description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
|
|
2940
|
-
"values": [
|
|
2941
|
-
{ "name": "x-small" },
|
|
2942
|
-
{ "name": "small" },
|
|
2943
|
-
{ "name": "medium" },
|
|
2944
|
-
{ "name": "large" }
|
|
2945
|
-
]
|
|
2946
|
-
},
|
|
2947
|
-
{
|
|
2948
|
-
"name": "pill",
|
|
2949
|
-
"description": "Draws pill-style tool buttons. This style will be applied to all child tool buttons.",
|
|
2950
|
-
"values": []
|
|
2951
|
-
},
|
|
2952
|
-
{
|
|
2953
|
-
"name": "outline",
|
|
2954
|
-
"description": "Draws outline-style tool buttons. This style will be applied to all child tool buttons.",
|
|
2955
|
-
"values": []
|
|
2956
|
-
},
|
|
2957
|
-
{
|
|
2958
|
-
"name": "variant",
|
|
2959
|
-
"values": [
|
|
2960
|
-
{ "name": "primary" },
|
|
2961
|
-
{ "name": "secondary" },
|
|
2962
|
-
{ "name": "success" },
|
|
2963
|
-
{ "name": "warning" },
|
|
2964
|
-
{ "name": "danger" },
|
|
2965
|
-
{ "name": "neutral" }
|
|
2966
|
-
]
|
|
2967
|
-
},
|
|
2968
|
-
{
|
|
2969
|
-
"name": "form",
|
|
2970
|
-
"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.",
|
|
2971
|
-
"values": []
|
|
2972
|
-
},
|
|
2973
|
-
{
|
|
2974
|
-
"name": "vertical",
|
|
2975
|
-
"description": "Use vertical layout for the radio group.",
|
|
2976
|
-
"values": []
|
|
2977
|
-
},
|
|
2978
|
-
{
|
|
2979
|
-
"name": "mode",
|
|
2980
|
-
"values": [{ "name": "radio" }, { "name": "checkbox" }]
|
|
2981
|
-
}
|
|
2982
|
-
],
|
|
2983
|
-
"references": []
|
|
2984
|
-
},
|
|
2985
2985
|
{
|
|
2986
2986
|
"name": "flow-ui-visually-hidden",
|
|
2987
2987
|
"description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The content to be visually hidden.",
|