@emuanalytics/flow-rdf-ui 4.1.22 → 4.1.24
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/components/autocomplete/autocomplete.component.mjs +3 -2
- package/dist/components/list/list.component.mjs +2 -1
- package/dist/components/list-item/list-item.component.mjs +5 -0
- package/dist/components/option/option.styles.mjs +5 -5
- package/dist/components/query-builder/query-builder.component.mjs +2 -0
- package/dist/custom-elements.json +4516 -4497
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/package.json.mjs +1 -1
- package/dist/vscode.html-custom-data.json +429 -420
- package/package.json +3 -3
- package/themes/dark.css +3 -3
- package/themes/dark.styles.js +3 -3
- package/themes/light.css +3 -3
- package/themes/light.styles.js +3 -3
|
@@ -1,6 +1,40 @@
|
|
|
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
|
+
},
|
|
4
38
|
{
|
|
5
39
|
"name": "flow-ui-animation",
|
|
6
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.",
|
|
@@ -63,6 +97,42 @@
|
|
|
63
97
|
],
|
|
64
98
|
"references": []
|
|
65
99
|
},
|
|
100
|
+
{
|
|
101
|
+
"name": "flow-ui-avatar",
|
|
102
|
+
"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.",
|
|
103
|
+
"attributes": [
|
|
104
|
+
{
|
|
105
|
+
"name": "image",
|
|
106
|
+
"description": "The image source to use for the avatar.",
|
|
107
|
+
"values": []
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"name": "label",
|
|
111
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
112
|
+
"values": []
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"name": "initials",
|
|
116
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
117
|
+
"values": []
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"name": "loading",
|
|
121
|
+
"description": "Indicates how the browser should load the image.",
|
|
122
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"name": "shape",
|
|
126
|
+
"description": "The shape of the avatar.",
|
|
127
|
+
"values": [
|
|
128
|
+
{ "name": "circle" },
|
|
129
|
+
{ "name": "square" },
|
|
130
|
+
{ "name": "rounded" }
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
],
|
|
134
|
+
"references": []
|
|
135
|
+
},
|
|
66
136
|
{
|
|
67
137
|
"name": "flow-ui-autocomplete",
|
|
68
138
|
"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.",
|
|
@@ -167,40 +237,6 @@
|
|
|
167
237
|
],
|
|
168
238
|
"references": []
|
|
169
239
|
},
|
|
170
|
-
{
|
|
171
|
-
"name": "flow-ui-alert",
|
|
172
|
-
"description": "Alerts are used to display important messages inline or as toast notifications.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the alert opens.\n- **flow-ui-after-show** - Emitted after the alert opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the alert closes.\n- **flow-ui-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast(): _Promise<void>_** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
|
|
173
|
-
"attributes": [
|
|
174
|
-
{
|
|
175
|
-
"name": "open",
|
|
176
|
-
"description": "Set to `true` to display the alert. You can also\nuse the `show()` and `hide()` methods.",
|
|
177
|
-
"values": []
|
|
178
|
-
},
|
|
179
|
-
{
|
|
180
|
-
"name": "closable",
|
|
181
|
-
"description": "Enables a close button that allows the user to dismiss the alert.",
|
|
182
|
-
"values": []
|
|
183
|
-
},
|
|
184
|
-
{
|
|
185
|
-
"name": "variant",
|
|
186
|
-
"description": "The alert's theme variant.",
|
|
187
|
-
"values": [
|
|
188
|
-
{ "name": "primary" },
|
|
189
|
-
{ "name": "secondary" },
|
|
190
|
-
{ "name": "success" },
|
|
191
|
-
{ "name": "neutral" },
|
|
192
|
-
{ "name": "warning" },
|
|
193
|
-
{ "name": "danger" }
|
|
194
|
-
]
|
|
195
|
-
},
|
|
196
|
-
{
|
|
197
|
-
"name": "duration",
|
|
198
|
-
"description": "The length of time (in ms) that the alert will show itself before closing. If the user interacts with\nthe alert before it closes (e.g. by moving the mouse over it), the timer will restart.",
|
|
199
|
-
"values": []
|
|
200
|
-
}
|
|
201
|
-
],
|
|
202
|
-
"references": []
|
|
203
|
-
},
|
|
204
240
|
{
|
|
205
241
|
"name": "flow-ui-badge",
|
|
206
242
|
"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.",
|
|
@@ -239,42 +275,6 @@
|
|
|
239
275
|
],
|
|
240
276
|
"references": []
|
|
241
277
|
},
|
|
242
|
-
{
|
|
243
|
-
"name": "flow-ui-avatar",
|
|
244
|
-
"description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
|
|
245
|
-
"attributes": [
|
|
246
|
-
{
|
|
247
|
-
"name": "image",
|
|
248
|
-
"description": "The image source to use for the avatar.",
|
|
249
|
-
"values": []
|
|
250
|
-
},
|
|
251
|
-
{
|
|
252
|
-
"name": "label",
|
|
253
|
-
"description": "A label to use to describe the avatar to assistive devices.",
|
|
254
|
-
"values": []
|
|
255
|
-
},
|
|
256
|
-
{
|
|
257
|
-
"name": "initials",
|
|
258
|
-
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
259
|
-
"values": []
|
|
260
|
-
},
|
|
261
|
-
{
|
|
262
|
-
"name": "loading",
|
|
263
|
-
"description": "Indicates how the browser should load the image.",
|
|
264
|
-
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
265
|
-
},
|
|
266
|
-
{
|
|
267
|
-
"name": "shape",
|
|
268
|
-
"description": "The shape of the avatar.",
|
|
269
|
-
"values": [
|
|
270
|
-
{ "name": "circle" },
|
|
271
|
-
{ "name": "square" },
|
|
272
|
-
{ "name": "rounded" }
|
|
273
|
-
]
|
|
274
|
-
}
|
|
275
|
-
],
|
|
276
|
-
"references": []
|
|
277
|
-
},
|
|
278
278
|
{
|
|
279
279
|
"name": "flow-ui-base-control",
|
|
280
280
|
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when an alteration to the control's value is committed by the user.\n- **flow-ui-clear** - Emitted when the clear button is activated.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
|
|
@@ -616,6 +616,12 @@
|
|
|
616
616
|
],
|
|
617
617
|
"references": []
|
|
618
618
|
},
|
|
619
|
+
{
|
|
620
|
+
"name": "flow-ui-card",
|
|
621
|
+
"description": "Cards can be used to group related subjects in a container.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
|
|
622
|
+
"attributes": [{ "name": "title", "values": [] }],
|
|
623
|
+
"references": []
|
|
624
|
+
},
|
|
619
625
|
{
|
|
620
626
|
"name": "flow-ui-carousel",
|
|
621
627
|
"description": "Carousels display an arbitrary number of content slides along a horizontal or vertical axis.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-slide-change** - Emitted when the active slide changes.\n\n### **Methods:**\n - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n\n### **Slots:**\n - _default_ - The carousel's main content, one or more `<flow-ui-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<flow-ui-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--aspect-ratio** - The aspect ratio of each slide. _(default: undefined)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **pagination** - The pagination indicators wrapper.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.",
|
|
@@ -668,12 +674,6 @@
|
|
|
668
674
|
],
|
|
669
675
|
"references": []
|
|
670
676
|
},
|
|
671
|
-
{
|
|
672
|
-
"name": "flow-ui-card",
|
|
673
|
-
"description": "Cards can be used to group related subjects in a container.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
|
|
674
|
-
"attributes": [{ "name": "title", "values": [] }],
|
|
675
|
-
"references": []
|
|
676
|
-
},
|
|
677
677
|
{
|
|
678
678
|
"name": "flow-ui-carousel-item",
|
|
679
679
|
"description": "A carousel item represent a slide within a [carousel](./flow-ui-carousel).\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The carousel item's content..\n\n### **CSS Properties:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_",
|
|
@@ -1188,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.",
|
|
@@ -1225,18 +1237,6 @@
|
|
|
1225
1237
|
],
|
|
1226
1238
|
"references": []
|
|
1227
1239
|
},
|
|
1228
|
-
{
|
|
1229
|
-
"name": "flow-ui-divider",
|
|
1230
|
-
"description": "Dividers are used to visually separate or group elements.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
|
|
1231
|
-
"attributes": [
|
|
1232
|
-
{
|
|
1233
|
-
"name": "vertical",
|
|
1234
|
-
"description": "Draws the divider in a vertical orientation.",
|
|
1235
|
-
"values": []
|
|
1236
|
-
}
|
|
1237
|
-
],
|
|
1238
|
-
"references": []
|
|
1239
|
-
},
|
|
1240
1240
|
{
|
|
1241
1241
|
"name": "flow-ui-dropdown",
|
|
1242
1242
|
"description": "Dropdowns expose additional content that \"drops down\" in a panel.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the dropdown opens.\n- **flow-ui-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the dropdown closes.\n- **flow-ui-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<flow-ui-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<flow-ui-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
|
|
@@ -1322,43 +1322,6 @@
|
|
|
1322
1322
|
],
|
|
1323
1323
|
"references": []
|
|
1324
1324
|
},
|
|
1325
|
-
{
|
|
1326
|
-
"name": "flow-ui-gauge",
|
|
1327
|
-
"description": "Gauges are used to display a single value with an optional icon and heading.\n\n\n---\n\n\n\n\n### **Slots:**\n - **title** - The gauge's title. Alternatively, you can use the `title` attribute.\n- **value** - The gauge's value. Alternatively, you can use the `value` attribute.\n- **unit** - Alternatively, you can use the `unit` attribute.\n- **info** - The content to display in the gauge's info dialog. If this is set then an info button will be displayed in the gauge's header.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The gauge's header.\n- **header-icon** - The icon in the gauge's header.\n- **title** - The title text in the gauge's header.\n- **info-button** - The info button in the gauge's header (if info dialog configured).",
|
|
1328
|
-
"attributes": [
|
|
1329
|
-
{
|
|
1330
|
-
"name": "title",
|
|
1331
|
-
"description": "The gauge title displayed in the header. Alternatively, use the `title` slot to enhance the label with HTML markup.",
|
|
1332
|
-
"values": []
|
|
1333
|
-
},
|
|
1334
|
-
{
|
|
1335
|
-
"name": "units",
|
|
1336
|
-
"description": "The units of the gauge value.",
|
|
1337
|
-
"values": []
|
|
1338
|
-
},
|
|
1339
|
-
{
|
|
1340
|
-
"name": "value",
|
|
1341
|
-
"description": "The value to display in the gauge.",
|
|
1342
|
-
"values": []
|
|
1343
|
-
},
|
|
1344
|
-
{
|
|
1345
|
-
"name": "icon",
|
|
1346
|
-
"description": "The icon to display in the gauge header.",
|
|
1347
|
-
"values": []
|
|
1348
|
-
},
|
|
1349
|
-
{
|
|
1350
|
-
"name": "icon-library",
|
|
1351
|
-
"description": "The icon library to use for the icon. Uses default library if not specified.",
|
|
1352
|
-
"values": []
|
|
1353
|
-
},
|
|
1354
|
-
{
|
|
1355
|
-
"name": "format",
|
|
1356
|
-
"description": "The [D3 format](https://d3js.org/d3-format#locale_format) to use when displaying numeric values.",
|
|
1357
|
-
"values": []
|
|
1358
|
-
}
|
|
1359
|
-
],
|
|
1360
|
-
"references": []
|
|
1361
|
-
},
|
|
1362
1325
|
{
|
|
1363
1326
|
"name": "flow-ui-form-group",
|
|
1364
1327
|
"description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
|
|
@@ -1370,7 +1333,7 @@
|
|
|
1370
1333
|
},
|
|
1371
1334
|
{
|
|
1372
1335
|
"name": "size",
|
|
1373
|
-
"description": "The form group's size. Child form
|
|
1336
|
+
"description": "The form group's size. Child form controls will automatically be set to the selected size.",
|
|
1374
1337
|
"values": [
|
|
1375
1338
|
{ "name": "small" },
|
|
1376
1339
|
{ "name": "medium" },
|
|
@@ -1400,52 +1363,207 @@
|
|
|
1400
1363
|
"references": []
|
|
1401
1364
|
},
|
|
1402
1365
|
{
|
|
1403
|
-
"name": "flow-ui-
|
|
1404
|
-
"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).",
|
|
1405
1368
|
"attributes": [
|
|
1406
1369
|
{
|
|
1407
|
-
"name": "
|
|
1408
|
-
"description": "The
|
|
1409
|
-
"values": [
|
|
1410
|
-
{ "name": "" },
|
|
1411
|
-
{ "name": "date" },
|
|
1412
|
-
{ "name": "datetime-local" },
|
|
1413
|
-
{ "name": "email" },
|
|
1414
|
-
{ "name": "number" },
|
|
1415
|
-
{ "name": "password" },
|
|
1416
|
-
{ "name": "search" },
|
|
1417
|
-
{ "name": "tel" },
|
|
1418
|
-
{ "name": "text" },
|
|
1419
|
-
{ "name": "time" },
|
|
1420
|
-
{ "name": "url" }
|
|
1421
|
-
]
|
|
1370
|
+
"name": "title",
|
|
1371
|
+
"description": "The gauge title displayed in the header. Alternatively, use the `title` slot to enhance the label with HTML markup.",
|
|
1372
|
+
"values": []
|
|
1422
1373
|
},
|
|
1423
1374
|
{
|
|
1424
|
-
"name": "
|
|
1425
|
-
"description": "The
|
|
1375
|
+
"name": "units",
|
|
1376
|
+
"description": "The units of the gauge value.",
|
|
1426
1377
|
"values": []
|
|
1427
1378
|
},
|
|
1428
1379
|
{
|
|
1429
1380
|
"name": "value",
|
|
1430
|
-
"description": "The
|
|
1381
|
+
"description": "The value to display in the gauge.",
|
|
1431
1382
|
"values": []
|
|
1432
1383
|
},
|
|
1433
1384
|
{
|
|
1434
|
-
"name": "
|
|
1435
|
-
"description": "The
|
|
1436
|
-
"values": [
|
|
1437
|
-
{ "name": "small" },
|
|
1438
|
-
{ "name": "medium" },
|
|
1439
|
-
{ "name": "large" }
|
|
1440
|
-
]
|
|
1385
|
+
"name": "icon",
|
|
1386
|
+
"description": "The icon to display in the gauge header.",
|
|
1387
|
+
"values": []
|
|
1441
1388
|
},
|
|
1442
1389
|
{
|
|
1443
|
-
"name": "
|
|
1444
|
-
"description": "
|
|
1390
|
+
"name": "icon-library",
|
|
1391
|
+
"description": "The icon library to use for the icon. Uses default library if not specified.",
|
|
1445
1392
|
"values": []
|
|
1446
1393
|
},
|
|
1447
1394
|
{
|
|
1448
|
-
"name": "
|
|
1395
|
+
"name": "format",
|
|
1396
|
+
"description": "The [D3 format](https://d3js.org/d3-format#locale_format) to use when displaying numeric values.",
|
|
1397
|
+
"values": []
|
|
1398
|
+
}
|
|
1399
|
+
],
|
|
1400
|
+
"references": []
|
|
1401
|
+
},
|
|
1402
|
+
{
|
|
1403
|
+
"name": "flow-ui-icon",
|
|
1404
|
+
"description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-load** - Emitted when the icon has loaded.\n- **flow-ui-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
|
|
1405
|
+
"attributes": [
|
|
1406
|
+
{
|
|
1407
|
+
"name": "name",
|
|
1408
|
+
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1409
|
+
"values": []
|
|
1410
|
+
},
|
|
1411
|
+
{
|
|
1412
|
+
"name": "src",
|
|
1413
|
+
"description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
|
|
1414
|
+
"values": []
|
|
1415
|
+
},
|
|
1416
|
+
{
|
|
1417
|
+
"name": "label",
|
|
1418
|
+
"description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
|
|
1419
|
+
"values": []
|
|
1420
|
+
},
|
|
1421
|
+
{
|
|
1422
|
+
"name": "library",
|
|
1423
|
+
"description": "The name of a registered custom icon library.",
|
|
1424
|
+
"values": []
|
|
1425
|
+
}
|
|
1426
|
+
],
|
|
1427
|
+
"references": []
|
|
1428
|
+
},
|
|
1429
|
+
{
|
|
1430
|
+
"name": "flow-ui-icon-button",
|
|
1431
|
+
"description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the icon button loses focus.\n- **flow-ui-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n- **hideConfirm()** - Hide the confirmation tooltip if it is showing\n- **showConfirm()** - Show the confirmation tooltip\n\n### **Slots:**\n - **tooltip** - The tooltip content to display when the user hovers over the icon button. Alternatively, you can use the `tooltip` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
1432
|
+
"attributes": [
|
|
1433
|
+
{
|
|
1434
|
+
"name": "name",
|
|
1435
|
+
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1436
|
+
"values": []
|
|
1437
|
+
},
|
|
1438
|
+
{
|
|
1439
|
+
"name": "library",
|
|
1440
|
+
"description": "The name of a registered custom icon library.",
|
|
1441
|
+
"values": []
|
|
1442
|
+
},
|
|
1443
|
+
{
|
|
1444
|
+
"name": "src",
|
|
1445
|
+
"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.",
|
|
1446
|
+
"values": []
|
|
1447
|
+
},
|
|
1448
|
+
{
|
|
1449
|
+
"name": "href",
|
|
1450
|
+
"description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
|
|
1451
|
+
"values": []
|
|
1452
|
+
},
|
|
1453
|
+
{
|
|
1454
|
+
"name": "target",
|
|
1455
|
+
"description": "Tells the browser where to open the link. Only used when `href` is set.",
|
|
1456
|
+
"values": [
|
|
1457
|
+
{ "name": "_blank" },
|
|
1458
|
+
{ "name": "_parent" },
|
|
1459
|
+
{ "name": "_self" },
|
|
1460
|
+
{ "name": "_top" }
|
|
1461
|
+
]
|
|
1462
|
+
},
|
|
1463
|
+
{
|
|
1464
|
+
"name": "download",
|
|
1465
|
+
"description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
|
|
1466
|
+
"values": []
|
|
1467
|
+
},
|
|
1468
|
+
{
|
|
1469
|
+
"name": "label",
|
|
1470
|
+
"description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
|
|
1471
|
+
"values": []
|
|
1472
|
+
},
|
|
1473
|
+
{
|
|
1474
|
+
"name": "tooltip",
|
|
1475
|
+
"description": "Tooltip text that gets displayed when the user hovers over the icon button. If you need to display HTML, use the\n`tooltip` slot instead.",
|
|
1476
|
+
"values": []
|
|
1477
|
+
},
|
|
1478
|
+
{
|
|
1479
|
+
"name": "tooltip-placement",
|
|
1480
|
+
"description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
|
|
1481
|
+
"values": [
|
|
1482
|
+
{ "name": "" },
|
|
1483
|
+
{ "name": "top" },
|
|
1484
|
+
{ "name": "top-start" },
|
|
1485
|
+
{ "name": "top-end" },
|
|
1486
|
+
{ "name": "right" },
|
|
1487
|
+
{ "name": "right-start" },
|
|
1488
|
+
{ "name": "right-end" },
|
|
1489
|
+
{ "name": "bottom" },
|
|
1490
|
+
{ "name": "bottom-start" },
|
|
1491
|
+
{ "name": "bottom-end" },
|
|
1492
|
+
{ "name": "left" },
|
|
1493
|
+
{ "name": "left-start" },
|
|
1494
|
+
{ "name": "left-end" }
|
|
1495
|
+
]
|
|
1496
|
+
},
|
|
1497
|
+
{
|
|
1498
|
+
"name": "tooltip-distance",
|
|
1499
|
+
"description": "The distance in pixels from which to offset the tooltip away from the icon button.",
|
|
1500
|
+
"values": []
|
|
1501
|
+
},
|
|
1502
|
+
{
|
|
1503
|
+
"name": "tooltip-skidding",
|
|
1504
|
+
"description": "The distance in pixels from which to offset the tooltip along the icon button.",
|
|
1505
|
+
"values": []
|
|
1506
|
+
},
|
|
1507
|
+
{
|
|
1508
|
+
"name": "disabled",
|
|
1509
|
+
"description": "Disables the button.",
|
|
1510
|
+
"values": []
|
|
1511
|
+
},
|
|
1512
|
+
{
|
|
1513
|
+
"name": "confirm",
|
|
1514
|
+
"description": "Confirmation text that gets displayed in a tooltip when the user clicks the icon button.\n If you need to display HTML, use the `confirm` slot instead.",
|
|
1515
|
+
"values": []
|
|
1516
|
+
}
|
|
1517
|
+
],
|
|
1518
|
+
"references": []
|
|
1519
|
+
},
|
|
1520
|
+
{
|
|
1521
|
+
"name": "flow-ui-input",
|
|
1522
|
+
"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- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type 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 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.",
|
|
1523
|
+
"attributes": [
|
|
1524
|
+
{
|
|
1525
|
+
"name": "type",
|
|
1526
|
+
"description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
|
|
1527
|
+
"values": [
|
|
1528
|
+
{ "name": "" },
|
|
1529
|
+
{ "name": "date" },
|
|
1530
|
+
{ "name": "datetime-local" },
|
|
1531
|
+
{ "name": "email" },
|
|
1532
|
+
{ "name": "number" },
|
|
1533
|
+
{ "name": "password" },
|
|
1534
|
+
{ "name": "search" },
|
|
1535
|
+
{ "name": "tel" },
|
|
1536
|
+
{ "name": "text" },
|
|
1537
|
+
{ "name": "time" },
|
|
1538
|
+
{ "name": "url" }
|
|
1539
|
+
]
|
|
1540
|
+
},
|
|
1541
|
+
{
|
|
1542
|
+
"name": "name",
|
|
1543
|
+
"description": "The name of the input, submitted as a name/value pair with form data.",
|
|
1544
|
+
"values": []
|
|
1545
|
+
},
|
|
1546
|
+
{
|
|
1547
|
+
"name": "value",
|
|
1548
|
+
"description": "The current value of the input, submitted as a name/value pair with form data.",
|
|
1549
|
+
"values": []
|
|
1550
|
+
},
|
|
1551
|
+
{
|
|
1552
|
+
"name": "size",
|
|
1553
|
+
"description": "The input's size.",
|
|
1554
|
+
"values": [
|
|
1555
|
+
{ "name": "small" },
|
|
1556
|
+
{ "name": "medium" },
|
|
1557
|
+
{ "name": "large" }
|
|
1558
|
+
]
|
|
1559
|
+
},
|
|
1560
|
+
{
|
|
1561
|
+
"name": "filled",
|
|
1562
|
+
"description": "Draws a filled input.",
|
|
1563
|
+
"values": []
|
|
1564
|
+
},
|
|
1565
|
+
{
|
|
1566
|
+
"name": "pill",
|
|
1449
1567
|
"description": "Draws a pill-style input with rounded edges.",
|
|
1450
1568
|
"values": []
|
|
1451
1569
|
},
|
|
@@ -1611,124 +1729,6 @@
|
|
|
1611
1729
|
],
|
|
1612
1730
|
"references": []
|
|
1613
1731
|
},
|
|
1614
|
-
{
|
|
1615
|
-
"name": "flow-ui-icon",
|
|
1616
|
-
"description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-load** - Emitted when the icon has loaded.\n- **flow-ui-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
|
|
1617
|
-
"attributes": [
|
|
1618
|
-
{
|
|
1619
|
-
"name": "name",
|
|
1620
|
-
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1621
|
-
"values": []
|
|
1622
|
-
},
|
|
1623
|
-
{
|
|
1624
|
-
"name": "src",
|
|
1625
|
-
"description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
|
|
1626
|
-
"values": []
|
|
1627
|
-
},
|
|
1628
|
-
{
|
|
1629
|
-
"name": "label",
|
|
1630
|
-
"description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
|
|
1631
|
-
"values": []
|
|
1632
|
-
},
|
|
1633
|
-
{
|
|
1634
|
-
"name": "library",
|
|
1635
|
-
"description": "The name of a registered custom icon library.",
|
|
1636
|
-
"values": []
|
|
1637
|
-
}
|
|
1638
|
-
],
|
|
1639
|
-
"references": []
|
|
1640
|
-
},
|
|
1641
|
-
{
|
|
1642
|
-
"name": "flow-ui-icon-button",
|
|
1643
|
-
"description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the icon button loses focus.\n- **flow-ui-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n- **hideConfirm()** - Hide the confirmation tooltip if it is showing\n- **showConfirm()** - Show the confirmation tooltip\n\n### **Slots:**\n - **tooltip** - The tooltip content to display when the user hovers over the icon button. Alternatively, you can use the `tooltip` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
1644
|
-
"attributes": [
|
|
1645
|
-
{
|
|
1646
|
-
"name": "name",
|
|
1647
|
-
"description": "The name of the icon to draw. Available names depend on the icon library being used.",
|
|
1648
|
-
"values": []
|
|
1649
|
-
},
|
|
1650
|
-
{
|
|
1651
|
-
"name": "library",
|
|
1652
|
-
"description": "The name of a registered custom icon library.",
|
|
1653
|
-
"values": []
|
|
1654
|
-
},
|
|
1655
|
-
{
|
|
1656
|
-
"name": "src",
|
|
1657
|
-
"description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
|
|
1658
|
-
"values": []
|
|
1659
|
-
},
|
|
1660
|
-
{
|
|
1661
|
-
"name": "href",
|
|
1662
|
-
"description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
|
|
1663
|
-
"values": []
|
|
1664
|
-
},
|
|
1665
|
-
{
|
|
1666
|
-
"name": "target",
|
|
1667
|
-
"description": "Tells the browser where to open the link. Only used when `href` is set.",
|
|
1668
|
-
"values": [
|
|
1669
|
-
{ "name": "_blank" },
|
|
1670
|
-
{ "name": "_parent" },
|
|
1671
|
-
{ "name": "_self" },
|
|
1672
|
-
{ "name": "_top" }
|
|
1673
|
-
]
|
|
1674
|
-
},
|
|
1675
|
-
{
|
|
1676
|
-
"name": "download",
|
|
1677
|
-
"description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
|
|
1678
|
-
"values": []
|
|
1679
|
-
},
|
|
1680
|
-
{
|
|
1681
|
-
"name": "label",
|
|
1682
|
-
"description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
|
|
1683
|
-
"values": []
|
|
1684
|
-
},
|
|
1685
|
-
{
|
|
1686
|
-
"name": "tooltip",
|
|
1687
|
-
"description": "Tooltip text that gets displayed when the user hovers over the icon button. If you need to display HTML, use the\n`tooltip` slot instead.",
|
|
1688
|
-
"values": []
|
|
1689
|
-
},
|
|
1690
|
-
{
|
|
1691
|
-
"name": "tooltip-placement",
|
|
1692
|
-
"description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
|
|
1693
|
-
"values": [
|
|
1694
|
-
{ "name": "" },
|
|
1695
|
-
{ "name": "top" },
|
|
1696
|
-
{ "name": "top-start" },
|
|
1697
|
-
{ "name": "top-end" },
|
|
1698
|
-
{ "name": "right" },
|
|
1699
|
-
{ "name": "right-start" },
|
|
1700
|
-
{ "name": "right-end" },
|
|
1701
|
-
{ "name": "bottom" },
|
|
1702
|
-
{ "name": "bottom-start" },
|
|
1703
|
-
{ "name": "bottom-end" },
|
|
1704
|
-
{ "name": "left" },
|
|
1705
|
-
{ "name": "left-start" },
|
|
1706
|
-
{ "name": "left-end" }
|
|
1707
|
-
]
|
|
1708
|
-
},
|
|
1709
|
-
{
|
|
1710
|
-
"name": "tooltip-distance",
|
|
1711
|
-
"description": "The distance in pixels from which to offset the tooltip away from the icon button.",
|
|
1712
|
-
"values": []
|
|
1713
|
-
},
|
|
1714
|
-
{
|
|
1715
|
-
"name": "tooltip-skidding",
|
|
1716
|
-
"description": "The distance in pixels from which to offset the tooltip along the icon button.",
|
|
1717
|
-
"values": []
|
|
1718
|
-
},
|
|
1719
|
-
{
|
|
1720
|
-
"name": "disabled",
|
|
1721
|
-
"description": "Disables the button.",
|
|
1722
|
-
"values": []
|
|
1723
|
-
},
|
|
1724
|
-
{
|
|
1725
|
-
"name": "confirm",
|
|
1726
|
-
"description": "Confirmation text that gets displayed in a tooltip when the user clicks the icon button.\n If you need to display HTML, use the `confirm` slot instead.",
|
|
1727
|
-
"values": []
|
|
1728
|
-
}
|
|
1729
|
-
],
|
|
1730
|
-
"references": []
|
|
1731
|
-
},
|
|
1732
1732
|
{
|
|
1733
1733
|
"name": "flow-ui-list",
|
|
1734
1734
|
"description": "A list of items that can be edited and reordered.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when a list item is renamed **or** a list item is selected (selectable lists only).\n- **flow-ui-input** - Emitted when a list item is selected (selectable lists only).\n- **flow-ui-remove** - Emitted when a list item is removed.\n- **flow-ui-drag-start** - Emitted when the user starts dragging to reorder list items.\n- **flow-ui-drag-drop** - Emitted when the user drops a list item to reorder it.\n- **flow-ui-drag-end** - Emitted when the drag-drop operation has finished or been cancelled.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -1770,7 +1770,16 @@
|
|
|
1770
1770
|
"description": "The label text for the list item.",
|
|
1771
1771
|
"values": []
|
|
1772
1772
|
},
|
|
1773
|
-
{
|
|
1773
|
+
{
|
|
1774
|
+
"name": "edit-menu-name",
|
|
1775
|
+
"description": "The 'edit' menu item text. (default: 'Edit')",
|
|
1776
|
+
"values": []
|
|
1777
|
+
},
|
|
1778
|
+
{
|
|
1779
|
+
"name": "placeholder",
|
|
1780
|
+
"description": "The list item input control's placeholder text.",
|
|
1781
|
+
"values": []
|
|
1782
|
+
},
|
|
1774
1783
|
{
|
|
1775
1784
|
"name": "value",
|
|
1776
1785
|
"description": "The tracking value (id) for the list item.",
|
|
@@ -1894,6 +1903,12 @@
|
|
|
1894
1903
|
],
|
|
1895
1904
|
"references": []
|
|
1896
1905
|
},
|
|
1906
|
+
{
|
|
1907
|
+
"name": "flow-ui-menu-label",
|
|
1908
|
+
"description": "Menu labels are used to describe a group of menu items.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
1909
|
+
"attributes": [],
|
|
1910
|
+
"references": []
|
|
1911
|
+
},
|
|
1897
1912
|
{
|
|
1898
1913
|
"name": "flow-ui-mutation-observer",
|
|
1899
1914
|
"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.",
|
|
@@ -1931,12 +1946,6 @@
|
|
|
1931
1946
|
],
|
|
1932
1947
|
"references": []
|
|
1933
1948
|
},
|
|
1934
|
-
{
|
|
1935
|
-
"name": "flow-ui-menu-label",
|
|
1936
|
-
"description": "Menu labels are used to describe a group of menu items.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
1937
|
-
"attributes": [],
|
|
1938
|
-
"references": []
|
|
1939
|
-
},
|
|
1940
1949
|
{
|
|
1941
1950
|
"name": "flow-ui-option",
|
|
1942
1951
|
"description": "Options define the selectable items within various form controls such as [select](/components/select).\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, a `<flow-ui-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
|
|
@@ -2139,21 +2148,55 @@
|
|
|
2139
2148
|
"values": [{ "name": "Element" }, { "name": "Element[]" }]
|
|
2140
2149
|
},
|
|
2141
2150
|
{
|
|
2142
|
-
"name": "auto-size-padding",
|
|
2143
|
-
"description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
|
|
2151
|
+
"name": "auto-size-padding",
|
|
2152
|
+
"description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
|
|
2153
|
+
"values": []
|
|
2154
|
+
},
|
|
2155
|
+
{
|
|
2156
|
+
"name": "hover-bridge",
|
|
2157
|
+
"description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
|
|
2158
|
+
"values": []
|
|
2159
|
+
}
|
|
2160
|
+
],
|
|
2161
|
+
"references": []
|
|
2162
|
+
},
|
|
2163
|
+
{
|
|
2164
|
+
"name": "flow-ui-progress-bar",
|
|
2165
|
+
"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.",
|
|
2166
|
+
"attributes": [
|
|
2167
|
+
{
|
|
2168
|
+
"name": "label",
|
|
2169
|
+
"description": "A custom label for assistive devices.",
|
|
2170
|
+
"values": []
|
|
2171
|
+
},
|
|
2172
|
+
{
|
|
2173
|
+
"name": "value",
|
|
2174
|
+
"description": "The current progress as a percentage, 0 to 100.",
|
|
2144
2175
|
"values": []
|
|
2145
2176
|
},
|
|
2146
2177
|
{
|
|
2147
|
-
"name": "
|
|
2148
|
-
"description": "When
|
|
2178
|
+
"name": "indeterminate",
|
|
2179
|
+
"description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
|
|
2149
2180
|
"values": []
|
|
2181
|
+
},
|
|
2182
|
+
{
|
|
2183
|
+
"name": "variant",
|
|
2184
|
+
"description": "The progress bar's theme variant",
|
|
2185
|
+
"values": [
|
|
2186
|
+
{ "name": "primary" },
|
|
2187
|
+
{ "name": "secondary" },
|
|
2188
|
+
{ "name": "success" },
|
|
2189
|
+
{ "name": "neutral" },
|
|
2190
|
+
{ "name": "warning" },
|
|
2191
|
+
{ "name": "danger" }
|
|
2192
|
+
]
|
|
2150
2193
|
}
|
|
2151
2194
|
],
|
|
2152
2195
|
"references": []
|
|
2153
2196
|
},
|
|
2154
2197
|
{
|
|
2155
|
-
"name": "flow-ui-progress-
|
|
2156
|
-
"description": "Progress
|
|
2198
|
+
"name": "flow-ui-progress-ring",
|
|
2199
|
+
"description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n\n\n---\n\n\n\n\n### **Slots:**\n - **label** - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
|
|
2157
2200
|
"attributes": [
|
|
2158
2201
|
{
|
|
2159
2202
|
"name": "label",
|
|
@@ -2167,12 +2210,12 @@
|
|
|
2167
2210
|
},
|
|
2168
2211
|
{
|
|
2169
2212
|
"name": "indeterminate",
|
|
2170
|
-
"description": "
|
|
2213
|
+
"description": "If the progress animation is indeterminate",
|
|
2171
2214
|
"values": []
|
|
2172
2215
|
},
|
|
2173
2216
|
{
|
|
2174
2217
|
"name": "variant",
|
|
2175
|
-
"description": "The progress
|
|
2218
|
+
"description": "The progress ring's theme variant",
|
|
2176
2219
|
"values": [
|
|
2177
2220
|
{ "name": "primary" },
|
|
2178
2221
|
{ "name": "secondary" },
|
|
@@ -2181,6 +2224,15 @@
|
|
|
2181
2224
|
{ "name": "warning" },
|
|
2182
2225
|
{ "name": "danger" }
|
|
2183
2226
|
]
|
|
2227
|
+
},
|
|
2228
|
+
{
|
|
2229
|
+
"name": "size",
|
|
2230
|
+
"description": "The progress ring's size",
|
|
2231
|
+
"values": [
|
|
2232
|
+
{ "name": "small" },
|
|
2233
|
+
{ "name": "medium" },
|
|
2234
|
+
{ "name": "large" }
|
|
2235
|
+
]
|
|
2184
2236
|
}
|
|
2185
2237
|
],
|
|
2186
2238
|
"references": []
|
|
@@ -2270,75 +2322,73 @@
|
|
|
2270
2322
|
"references": []
|
|
2271
2323
|
},
|
|
2272
2324
|
{
|
|
2273
|
-
"name": "flow-ui-
|
|
2274
|
-
"description": "
|
|
2325
|
+
"name": "flow-ui-radio-group",
|
|
2326
|
+
"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.",
|
|
2275
2327
|
"attributes": [
|
|
2276
2328
|
{
|
|
2277
2329
|
"name": "label",
|
|
2278
|
-
"description": "
|
|
2330
|
+
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
2279
2331
|
"values": []
|
|
2280
2332
|
},
|
|
2281
2333
|
{
|
|
2282
|
-
"name": "
|
|
2283
|
-
"description": "The
|
|
2334
|
+
"name": "help-text",
|
|
2335
|
+
"description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
2284
2336
|
"values": []
|
|
2285
2337
|
},
|
|
2286
2338
|
{
|
|
2287
|
-
"name": "
|
|
2288
|
-
"description": "
|
|
2339
|
+
"name": "name",
|
|
2340
|
+
"description": "The name of the radio group, submitted as a name/value pair with form data.",
|
|
2289
2341
|
"values": []
|
|
2290
2342
|
},
|
|
2291
2343
|
{
|
|
2292
|
-
"name": "
|
|
2293
|
-
"description": "The
|
|
2294
|
-
"values": [
|
|
2295
|
-
{ "name": "primary" },
|
|
2296
|
-
{ "name": "secondary" },
|
|
2297
|
-
{ "name": "success" },
|
|
2298
|
-
{ "name": "neutral" },
|
|
2299
|
-
{ "name": "warning" },
|
|
2300
|
-
{ "name": "danger" }
|
|
2301
|
-
]
|
|
2344
|
+
"name": "value",
|
|
2345
|
+
"description": "The current value of the radio group, submitted as a name/value pair with form data.",
|
|
2346
|
+
"values": []
|
|
2302
2347
|
},
|
|
2303
2348
|
{
|
|
2304
2349
|
"name": "size",
|
|
2305
|
-
"description": "The
|
|
2350
|
+
"description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
|
|
2306
2351
|
"values": [
|
|
2307
2352
|
{ "name": "small" },
|
|
2308
2353
|
{ "name": "medium" },
|
|
2309
2354
|
{ "name": "large" }
|
|
2310
2355
|
]
|
|
2311
|
-
}
|
|
2312
|
-
],
|
|
2313
|
-
"references": []
|
|
2314
|
-
},
|
|
2315
|
-
{
|
|
2316
|
-
"name": "flow-ui-radio-group",
|
|
2317
|
-
"description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the radio group's selected value changes.\n- **flow-ui-input** - Emitted when the radio group receives user input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where `<flow-ui-radio>` or `<flow-ui-tool-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
|
|
2318
|
-
"attributes": [
|
|
2356
|
+
},
|
|
2319
2357
|
{
|
|
2320
|
-
"name": "
|
|
2321
|
-
"description": "
|
|
2358
|
+
"name": "reverse",
|
|
2359
|
+
"description": "Display the radios using a reversed style with left-aligned labels.",
|
|
2322
2360
|
"values": []
|
|
2323
2361
|
},
|
|
2324
2362
|
{
|
|
2325
|
-
"name": "
|
|
2326
|
-
"description": "
|
|
2363
|
+
"name": "form",
|
|
2364
|
+
"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.",
|
|
2327
2365
|
"values": []
|
|
2328
2366
|
},
|
|
2367
|
+
{
|
|
2368
|
+
"name": "required",
|
|
2369
|
+
"description": "Ensures a child radio is checked before allowing the containing form to submit.",
|
|
2370
|
+
"values": []
|
|
2371
|
+
}
|
|
2372
|
+
],
|
|
2373
|
+
"references": []
|
|
2374
|
+
},
|
|
2375
|
+
{
|
|
2376
|
+
"name": "flow-ui-range",
|
|
2377
|
+
"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.",
|
|
2378
|
+
"attributes": [
|
|
2329
2379
|
{
|
|
2330
2380
|
"name": "name",
|
|
2331
|
-
"description": "The name of the
|
|
2381
|
+
"description": "The name of the range, submitted as a name/value pair with form data.",
|
|
2332
2382
|
"values": []
|
|
2333
2383
|
},
|
|
2334
2384
|
{
|
|
2335
2385
|
"name": "value",
|
|
2336
|
-
"description": "The current value of the
|
|
2386
|
+
"description": "The current value of the range, submitted as a name/value pair with form data.",
|
|
2337
2387
|
"values": []
|
|
2338
2388
|
},
|
|
2339
2389
|
{
|
|
2340
2390
|
"name": "size",
|
|
2341
|
-
"description": "The
|
|
2391
|
+
"description": "The input's size.",
|
|
2342
2392
|
"values": [
|
|
2343
2393
|
{ "name": "small" },
|
|
2344
2394
|
{ "name": "medium" },
|
|
@@ -2346,8 +2396,38 @@
|
|
|
2346
2396
|
]
|
|
2347
2397
|
},
|
|
2348
2398
|
{
|
|
2349
|
-
"name": "
|
|
2350
|
-
"description": "
|
|
2399
|
+
"name": "label",
|
|
2400
|
+
"description": "The range's label. If you need to display HTML, use the `label` slot instead.",
|
|
2401
|
+
"values": []
|
|
2402
|
+
},
|
|
2403
|
+
{
|
|
2404
|
+
"name": "help-text",
|
|
2405
|
+
"description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
|
|
2406
|
+
"values": []
|
|
2407
|
+
},
|
|
2408
|
+
{
|
|
2409
|
+
"name": "disabled",
|
|
2410
|
+
"description": "Disables the range.",
|
|
2411
|
+
"values": []
|
|
2412
|
+
},
|
|
2413
|
+
{
|
|
2414
|
+
"name": "min",
|
|
2415
|
+
"description": "The minimum acceptable value of the range.",
|
|
2416
|
+
"values": []
|
|
2417
|
+
},
|
|
2418
|
+
{
|
|
2419
|
+
"name": "max",
|
|
2420
|
+
"description": "The maximum acceptable value of the range.",
|
|
2421
|
+
"values": []
|
|
2422
|
+
},
|
|
2423
|
+
{
|
|
2424
|
+
"name": "step",
|
|
2425
|
+
"description": "The interval at which the range will increase and decrease.",
|
|
2426
|
+
"values": []
|
|
2427
|
+
},
|
|
2428
|
+
{
|
|
2429
|
+
"name": "format",
|
|
2430
|
+
"description": "Number format to use for numeric display. (D3 format string)",
|
|
2351
2431
|
"values": []
|
|
2352
2432
|
},
|
|
2353
2433
|
{
|
|
@@ -2356,10 +2436,11 @@
|
|
|
2356
2436
|
"values": []
|
|
2357
2437
|
},
|
|
2358
2438
|
{
|
|
2359
|
-
"name": "
|
|
2360
|
-
"description": "
|
|
2439
|
+
"name": "inline",
|
|
2440
|
+
"description": "Display the control in the 'inline' form control style.",
|
|
2361
2441
|
"values": []
|
|
2362
|
-
}
|
|
2442
|
+
},
|
|
2443
|
+
{ "name": "no-input", "values": [] }
|
|
2363
2444
|
],
|
|
2364
2445
|
"references": []
|
|
2365
2446
|
},
|
|
@@ -2486,94 +2567,39 @@
|
|
|
2486
2567
|
"references": []
|
|
2487
2568
|
},
|
|
2488
2569
|
{
|
|
2489
|
-
"name": "flow-ui-
|
|
2490
|
-
"description": "
|
|
2570
|
+
"name": "flow-ui-split-view",
|
|
2571
|
+
"description": "Split-views contain two or more split-view panes to create resizable areas.\n\n\n---\n\n\n",
|
|
2491
2572
|
"attributes": [
|
|
2492
2573
|
{
|
|
2493
|
-
"name": "
|
|
2494
|
-
"description": "
|
|
2495
|
-
"values": []
|
|
2496
|
-
},
|
|
2497
|
-
{
|
|
2498
|
-
"name": "value",
|
|
2499
|
-
"description": "The current value of the range, submitted as a name/value pair with form data.",
|
|
2500
|
-
"values": []
|
|
2501
|
-
},
|
|
2502
|
-
{
|
|
2503
|
-
"name": "size",
|
|
2504
|
-
"description": "The input's size.",
|
|
2505
|
-
"values": [
|
|
2506
|
-
{ "name": "small" },
|
|
2507
|
-
{ "name": "medium" },
|
|
2508
|
-
{ "name": "large" }
|
|
2509
|
-
]
|
|
2510
|
-
},
|
|
2511
|
-
{
|
|
2512
|
-
"name": "label",
|
|
2513
|
-
"description": "The range's label. If you need to display HTML, use the `label` slot instead.",
|
|
2514
|
-
"values": []
|
|
2515
|
-
},
|
|
2516
|
-
{
|
|
2517
|
-
"name": "help-text",
|
|
2518
|
-
"description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
|
|
2519
|
-
"values": []
|
|
2520
|
-
},
|
|
2521
|
-
{
|
|
2522
|
-
"name": "disabled",
|
|
2523
|
-
"description": "Disables the range.",
|
|
2524
|
-
"values": []
|
|
2525
|
-
},
|
|
2526
|
-
{
|
|
2527
|
-
"name": "min",
|
|
2528
|
-
"description": "The minimum acceptable value of the range.",
|
|
2529
|
-
"values": []
|
|
2530
|
-
},
|
|
2531
|
-
{
|
|
2532
|
-
"name": "max",
|
|
2533
|
-
"description": "The maximum acceptable value of the range.",
|
|
2534
|
-
"values": []
|
|
2535
|
-
},
|
|
2536
|
-
{
|
|
2537
|
-
"name": "step",
|
|
2538
|
-
"description": "The interval at which the range will increase and decrease.",
|
|
2539
|
-
"values": []
|
|
2540
|
-
},
|
|
2541
|
-
{
|
|
2542
|
-
"name": "format",
|
|
2543
|
-
"description": "Number format to use for numeric display. (D3 format string)",
|
|
2574
|
+
"name": "no-drag-close",
|
|
2575
|
+
"description": "Disable drag-to-close behaviour.",
|
|
2544
2576
|
"values": []
|
|
2545
2577
|
},
|
|
2546
2578
|
{
|
|
2547
|
-
"name": "
|
|
2548
|
-
"description": "
|
|
2549
|
-
"values": []
|
|
2579
|
+
"name": "positions",
|
|
2580
|
+
"description": "The pane positions in CSS size units",
|
|
2581
|
+
"values": [{ "name": "string[]" }]
|
|
2550
2582
|
},
|
|
2551
2583
|
{
|
|
2552
|
-
"name": "
|
|
2553
|
-
"description": "
|
|
2584
|
+
"name": "vertical",
|
|
2585
|
+
"description": "Set to `true` for vertically-arranged panes. By default, panes are layed out horizontally.",
|
|
2554
2586
|
"values": []
|
|
2555
|
-
}
|
|
2556
|
-
{ "name": "no-input", "values": [] }
|
|
2587
|
+
}
|
|
2557
2588
|
],
|
|
2558
2589
|
"references": []
|
|
2559
2590
|
},
|
|
2560
2591
|
{
|
|
2561
|
-
"name": "flow-ui-split-view",
|
|
2562
|
-
"description": "Split-
|
|
2592
|
+
"name": "flow-ui-split-view-divider",
|
|
2593
|
+
"description": "Split-view dividers are used internally by split-views to create resizable areas.\n\n\n---\n\n\n",
|
|
2563
2594
|
"attributes": [
|
|
2564
2595
|
{
|
|
2565
|
-
"name": "
|
|
2566
|
-
"description": "
|
|
2596
|
+
"name": "disabled",
|
|
2597
|
+
"description": "Disables user interaction with the split pane divider.",
|
|
2567
2598
|
"values": []
|
|
2568
2599
|
},
|
|
2569
|
-
{
|
|
2570
|
-
"name": "positions",
|
|
2571
|
-
"description": "The pane positions in CSS size units",
|
|
2572
|
-
"values": [{ "name": "string[]" }]
|
|
2573
|
-
},
|
|
2574
2600
|
{
|
|
2575
2601
|
"name": "vertical",
|
|
2576
|
-
"description": "
|
|
2602
|
+
"description": "Draws the divider for vertically-arranged panes",
|
|
2577
2603
|
"values": []
|
|
2578
2604
|
}
|
|
2579
2605
|
],
|
|
@@ -2626,23 +2652,6 @@
|
|
|
2626
2652
|
],
|
|
2627
2653
|
"references": []
|
|
2628
2654
|
},
|
|
2629
|
-
{
|
|
2630
|
-
"name": "flow-ui-split-view-divider",
|
|
2631
|
-
"description": "Split-view dividers are used internally by split-views to create resizable areas.\n\n\n---\n\n\n",
|
|
2632
|
-
"attributes": [
|
|
2633
|
-
{
|
|
2634
|
-
"name": "disabled",
|
|
2635
|
-
"description": "Disables user interaction with the split pane divider.",
|
|
2636
|
-
"values": []
|
|
2637
|
-
},
|
|
2638
|
-
{
|
|
2639
|
-
"name": "vertical",
|
|
2640
|
-
"description": "Draws the divider for vertically-arranged panes",
|
|
2641
|
-
"values": []
|
|
2642
|
-
}
|
|
2643
|
-
],
|
|
2644
|
-
"references": []
|
|
2645
|
-
},
|
|
2646
2655
|
{
|
|
2647
2656
|
"name": "flow-ui-split-view-toggle-button",
|
|
2648
2657
|
"description": "Use a split panel toggle button to control a parent panel's open/closed state\n\n\n---\n\n\n",
|
|
@@ -2665,6 +2674,12 @@
|
|
|
2665
2674
|
],
|
|
2666
2675
|
"references": []
|
|
2667
2676
|
},
|
|
2677
|
+
{
|
|
2678
|
+
"name": "flow-ui-stepper",
|
|
2679
|
+
"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`",
|
|
2680
|
+
"attributes": [],
|
|
2681
|
+
"references": []
|
|
2682
|
+
},
|
|
2668
2683
|
{
|
|
2669
2684
|
"name": "flow-ui-stepper-panel",
|
|
2670
2685
|
"description": "Stepper panels provide a single page in a stepper to guide users through a series of steps.\n\n\n---\n\n\n",
|
|
@@ -2748,12 +2763,6 @@
|
|
|
2748
2763
|
],
|
|
2749
2764
|
"references": []
|
|
2750
2765
|
},
|
|
2751
|
-
{
|
|
2752
|
-
"name": "flow-ui-stepper",
|
|
2753
|
-
"description": "Steppers are used to guide users through a series of steps in a wizard-like UI.\n\n\n---\n\n\n\n\n### **Methods:**\n - **setComplete(panelName: _string_, complete: _boolean_)** - Mark the specified panel as `complete`",
|
|
2754
|
-
"attributes": [],
|
|
2755
|
-
"references": []
|
|
2756
|
-
},
|
|
2757
2766
|
{
|
|
2758
2767
|
"name": "flow-ui-tab",
|
|
2759
2768
|
"description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<flow-ui-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
|