@emuanalytics/flow-rdf-ui 4.0.9 → 4.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +3466 -3466
- package/dist/package.json.mjs +1 -1
- package/dist/vscode.html-custom-data.json +354 -354
- package/package.json +3 -3
|
@@ -1,40 +1,6 @@
|
|
|
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
4
|
{
|
|
39
5
|
"name": "flow-ui-animation",
|
|
40
6
|
"description": "Animate elements declaratively with over 100 animation presets. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-cancel** - Emitted when the animation is canceled.\n- **flow-ui-finish** - Emitted when the animation finishes.\n- **flow-ui-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<flow-ui-animation>` elements.",
|
|
@@ -98,48 +64,51 @@
|
|
|
98
64
|
"references": []
|
|
99
65
|
},
|
|
100
66
|
{
|
|
101
|
-
"name": "flow-ui-
|
|
102
|
-
"description": "
|
|
67
|
+
"name": "flow-ui-badge",
|
|
68
|
+
"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.",
|
|
103
69
|
"attributes": [
|
|
104
70
|
{
|
|
105
|
-
"name": "
|
|
106
|
-
"description": "The
|
|
107
|
-
"values": [
|
|
71
|
+
"name": "variant",
|
|
72
|
+
"description": "The badge's theme variant.",
|
|
73
|
+
"values": [
|
|
74
|
+
{ "name": "primary" },
|
|
75
|
+
{ "name": "secondary" },
|
|
76
|
+
{ "name": "success" },
|
|
77
|
+
{ "name": "neutral" },
|
|
78
|
+
{ "name": "warning" },
|
|
79
|
+
{ "name": "danger" }
|
|
80
|
+
]
|
|
108
81
|
},
|
|
109
82
|
{
|
|
110
|
-
"name": "
|
|
111
|
-
"description": "
|
|
83
|
+
"name": "pill",
|
|
84
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
112
85
|
"values": []
|
|
113
86
|
},
|
|
114
87
|
{
|
|
115
|
-
"name": "
|
|
116
|
-
"description": "
|
|
88
|
+
"name": "pulse",
|
|
89
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
117
90
|
"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
91
|
}
|
|
133
92
|
],
|
|
134
93
|
"references": []
|
|
135
94
|
},
|
|
136
95
|
{
|
|
137
|
-
"name": "flow-ui-
|
|
138
|
-
"description": "
|
|
96
|
+
"name": "flow-ui-alert",
|
|
97
|
+
"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.",
|
|
139
98
|
"attributes": [
|
|
99
|
+
{
|
|
100
|
+
"name": "open",
|
|
101
|
+
"description": "Set to `true` to display the alert. You can also\nuse the `show()` and `hide()` methods.",
|
|
102
|
+
"values": []
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"name": "closable",
|
|
106
|
+
"description": "Enables a close button that allows the user to dismiss the alert.",
|
|
107
|
+
"values": []
|
|
108
|
+
},
|
|
140
109
|
{
|
|
141
110
|
"name": "variant",
|
|
142
|
-
"description": "The
|
|
111
|
+
"description": "The alert's theme variant.",
|
|
143
112
|
"values": [
|
|
144
113
|
{ "name": "primary" },
|
|
145
114
|
{ "name": "secondary" },
|
|
@@ -150,13 +119,20 @@
|
|
|
150
119
|
]
|
|
151
120
|
},
|
|
152
121
|
{
|
|
153
|
-
"name": "
|
|
154
|
-
"description": "
|
|
122
|
+
"name": "duration",
|
|
123
|
+
"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.",
|
|
155
124
|
"values": []
|
|
156
|
-
}
|
|
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": [
|
|
157
133
|
{
|
|
158
|
-
"name": "
|
|
159
|
-
"description": "
|
|
134
|
+
"name": "label",
|
|
135
|
+
"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.",
|
|
160
136
|
"values": []
|
|
161
137
|
}
|
|
162
138
|
],
|
|
@@ -189,18 +165,6 @@
|
|
|
189
165
|
],
|
|
190
166
|
"references": []
|
|
191
167
|
},
|
|
192
|
-
{
|
|
193
|
-
"name": "flow-ui-breadcrumb",
|
|
194
|
-
"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.",
|
|
195
|
-
"attributes": [
|
|
196
|
-
{
|
|
197
|
-
"name": "label",
|
|
198
|
-
"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.",
|
|
199
|
-
"values": []
|
|
200
|
-
}
|
|
201
|
-
],
|
|
202
|
-
"references": []
|
|
203
|
-
},
|
|
204
168
|
{
|
|
205
169
|
"name": "flow-ui-button",
|
|
206
170
|
"description": "Buttons represent actions that are available to the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the button loses focus.\n- **flow-ui-focus** - Emitted when the button gains focus.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<flow-ui-icon>` element.",
|
|
@@ -368,6 +332,42 @@
|
|
|
368
332
|
],
|
|
369
333
|
"references": []
|
|
370
334
|
},
|
|
335
|
+
{
|
|
336
|
+
"name": "flow-ui-avatar",
|
|
337
|
+
"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.",
|
|
338
|
+
"attributes": [
|
|
339
|
+
{
|
|
340
|
+
"name": "image",
|
|
341
|
+
"description": "The image source to use for the avatar.",
|
|
342
|
+
"values": []
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"name": "label",
|
|
346
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
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
371
|
{
|
|
372
372
|
"name": "flow-ui-calendar",
|
|
373
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.",
|
|
@@ -588,37 +588,37 @@
|
|
|
588
588
|
"references": []
|
|
589
589
|
},
|
|
590
590
|
{
|
|
591
|
-
"name": "flow-ui-color-
|
|
592
|
-
"description": "
|
|
591
|
+
"name": "flow-ui-color-stop",
|
|
592
|
+
"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
593
|
"attributes": [
|
|
594
594
|
{
|
|
595
|
-
"name": "
|
|
596
|
-
"description": "The
|
|
595
|
+
"name": "name",
|
|
596
|
+
"description": "The name of the color stop, submitted as a name/value pair with form data.",
|
|
597
597
|
"values": []
|
|
598
598
|
},
|
|
599
599
|
{
|
|
600
|
-
"name": "
|
|
601
|
-
"description": "
|
|
600
|
+
"name": "form",
|
|
601
|
+
"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.",
|
|
602
602
|
"values": []
|
|
603
603
|
},
|
|
604
604
|
{
|
|
605
|
-
"name": "
|
|
606
|
-
"description": "
|
|
607
|
-
"values": [
|
|
608
|
-
{ "name": "hex" },
|
|
609
|
-
{ "name": "rgb" },
|
|
610
|
-
{ "name": "hsl" },
|
|
611
|
-
{ "name": "hsv" }
|
|
612
|
-
]
|
|
605
|
+
"name": "required",
|
|
606
|
+
"description": "Makes the color stop as a required field.",
|
|
607
|
+
"values": []
|
|
613
608
|
},
|
|
614
609
|
{
|
|
615
|
-
"name": "
|
|
616
|
-
"description": "
|
|
617
|
-
"values": []
|
|
610
|
+
"name": "options",
|
|
611
|
+
"description": "The color stop options object.",
|
|
612
|
+
"values": [{ "name": "ColorStopOptions" }]
|
|
613
|
+
},
|
|
614
|
+
{
|
|
615
|
+
"name": "value",
|
|
616
|
+
"description": "The current value of the color stop component.",
|
|
617
|
+
"values": [{ "name": "ColorStopValue" }]
|
|
618
618
|
},
|
|
619
619
|
{
|
|
620
620
|
"name": "size",
|
|
621
|
-
"description": "
|
|
621
|
+
"description": "The size of the color stop component.",
|
|
622
622
|
"values": [
|
|
623
623
|
{ "name": "small" },
|
|
624
624
|
{ "name": "medium" },
|
|
@@ -626,179 +626,172 @@
|
|
|
626
626
|
]
|
|
627
627
|
},
|
|
628
628
|
{
|
|
629
|
-
"name": "
|
|
630
|
-
"description": "
|
|
629
|
+
"name": "placeholder",
|
|
630
|
+
"description": "Set to `true` to display a placeholder color stop that\nallows the user to add a new color stop.",
|
|
631
|
+
"values": []
|
|
632
|
+
},
|
|
633
|
+
{
|
|
634
|
+
"name": "fixed",
|
|
635
|
+
"description": "Set to `true` to display a fixed color stop that allows the user\nto select a fixed color in a color mapping.",
|
|
631
636
|
"values": []
|
|
632
637
|
},
|
|
638
|
+
{
|
|
639
|
+
"name": "swatches",
|
|
640
|
+
"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.",
|
|
641
|
+
"values": [{ "name": "string[]" }]
|
|
642
|
+
}
|
|
643
|
+
],
|
|
644
|
+
"references": []
|
|
645
|
+
},
|
|
646
|
+
{
|
|
647
|
+
"name": "flow-ui-date-time-picker",
|
|
648
|
+
"description": "Date time pickers allow users to select a date and time from a calendar and clock interface.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-clear** - Emitted when the control's value is cleared.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-show** - Emitted when calendar opens.\n- **flow-ui-after-show** - Emitted after the calendar opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the calendar closes.\n- **flow-ui-after-hide** - Emitted after the calendar closes and all animations are complete.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the calendar.\n- **hide()** - Hides the calendar.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - **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 picker.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **mode-icon** - An icon to use in lieu of the default mode 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-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, mode-icon, combobox, and clear icon.\n- **prefix** - The container that wraps the prefix slot.\n- **display-input** - The element that displays the selected date/time, an `<input>` element.\n- **clear-button** - The clear button.\n- **mode-icon** - The mode icon, a `<flow-ui-icon>` element.",
|
|
649
|
+
"attributes": [
|
|
633
650
|
{
|
|
634
651
|
"name": "name",
|
|
635
|
-
"description": "The name of the
|
|
652
|
+
"description": "The name of the date/time picker, submitted as a name/value pair with form data.",
|
|
636
653
|
"values": []
|
|
637
654
|
},
|
|
638
655
|
{
|
|
639
|
-
"name": "
|
|
640
|
-
"description": "
|
|
656
|
+
"name": "value",
|
|
657
|
+
"description": "The current value of the date/time picker. (ISO8601 date/time string)",
|
|
641
658
|
"values": []
|
|
642
659
|
},
|
|
643
660
|
{
|
|
644
|
-
"name": "
|
|
645
|
-
"description": "
|
|
661
|
+
"name": "display-mode",
|
|
662
|
+
"description": "Select whether to show date only, time only or both date and time.",
|
|
646
663
|
"values": [
|
|
647
|
-
{ "name": "" },
|
|
648
|
-
{ "name": "
|
|
649
|
-
{ "name": "
|
|
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" }
|
|
664
|
+
{ "name": "date" },
|
|
665
|
+
{ "name": "time" },
|
|
666
|
+
{ "name": "datetime" }
|
|
660
667
|
]
|
|
661
668
|
},
|
|
662
669
|
{
|
|
663
|
-
"name": "
|
|
664
|
-
"description": "
|
|
665
|
-
"values": []
|
|
666
|
-
},
|
|
667
|
-
{
|
|
668
|
-
"name": "skidding",
|
|
669
|
-
"description": "The distance in pixels from which to offset the panel along its trigger.",
|
|
670
|
+
"name": "format",
|
|
671
|
+
"description": "Specify the display format using a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
670
672
|
"values": []
|
|
671
673
|
},
|
|
672
674
|
{
|
|
673
|
-
"name": "
|
|
674
|
-
"description": "
|
|
675
|
+
"name": "timezone",
|
|
676
|
+
"description": "Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`)",
|
|
675
677
|
"values": []
|
|
676
678
|
},
|
|
677
679
|
{
|
|
678
|
-
"name": "
|
|
679
|
-
"description": "
|
|
680
|
+
"name": "locale",
|
|
681
|
+
"description": "Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`)",
|
|
680
682
|
"values": []
|
|
681
683
|
},
|
|
682
684
|
{
|
|
683
|
-
"name": "
|
|
684
|
-
"description": "
|
|
685
|
-
"values": [
|
|
685
|
+
"name": "size",
|
|
686
|
+
"description": "The date/time picker's size.",
|
|
687
|
+
"values": [
|
|
688
|
+
{ "name": "small" },
|
|
689
|
+
{ "name": "medium" },
|
|
690
|
+
{ "name": "large" }
|
|
691
|
+
]
|
|
686
692
|
},
|
|
687
693
|
{
|
|
688
|
-
"name": "
|
|
689
|
-
"description": "
|
|
690
|
-
"values": [
|
|
694
|
+
"name": "placeholder",
|
|
695
|
+
"description": "Placeholder text to show as a hint when the date/time picker is empty.",
|
|
696
|
+
"values": []
|
|
691
697
|
},
|
|
692
698
|
{
|
|
693
|
-
"name": "
|
|
694
|
-
"description": "
|
|
699
|
+
"name": "disabled",
|
|
700
|
+
"description": "Disables the date/time picker control.",
|
|
695
701
|
"values": []
|
|
696
702
|
},
|
|
697
703
|
{
|
|
698
|
-
"name": "
|
|
699
|
-
"description": "
|
|
704
|
+
"name": "clearable",
|
|
705
|
+
"description": "Adds a clear button when the date/time picker is not empty.",
|
|
700
706
|
"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.",
|
|
708
|
-
"attributes": [
|
|
707
|
+
},
|
|
709
708
|
{
|
|
710
|
-
"name": "
|
|
711
|
-
"description": "
|
|
709
|
+
"name": "open",
|
|
710
|
+
"description": "Indicates whether or not the calendar is open. You can toggle this attribute to show and hide the calendar, or you can\nuse the `show()` and `hide()` methods.",
|
|
712
711
|
"values": []
|
|
713
712
|
},
|
|
714
713
|
{
|
|
715
|
-
"name": "
|
|
716
|
-
"description": "
|
|
714
|
+
"name": "hoist",
|
|
715
|
+
"description": "Enable this option to prevent the listbox 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.",
|
|
717
716
|
"values": []
|
|
718
717
|
},
|
|
719
718
|
{
|
|
720
|
-
"name": "
|
|
721
|
-
"description": "
|
|
719
|
+
"name": "filled",
|
|
720
|
+
"description": "Draws a filled select.",
|
|
722
721
|
"values": []
|
|
723
722
|
},
|
|
724
723
|
{
|
|
725
|
-
"name": "
|
|
726
|
-
"description": "
|
|
727
|
-
"values": [
|
|
724
|
+
"name": "pill",
|
|
725
|
+
"description": "Draws a pill-style select with rounded edges.",
|
|
726
|
+
"values": []
|
|
728
727
|
},
|
|
729
728
|
{
|
|
730
|
-
"name": "
|
|
731
|
-
"description": "The
|
|
732
|
-
"values": [
|
|
729
|
+
"name": "label",
|
|
730
|
+
"description": "The select's label. If you need to display HTML, use the `label` slot instead.",
|
|
731
|
+
"values": []
|
|
733
732
|
},
|
|
734
733
|
{
|
|
735
|
-
"name": "
|
|
736
|
-
"description": "The
|
|
734
|
+
"name": "placement",
|
|
735
|
+
"description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
|
|
737
736
|
"values": [
|
|
738
|
-
{ "name": "
|
|
739
|
-
{ "name": "
|
|
740
|
-
{ "name": "
|
|
737
|
+
{ "name": "top" },
|
|
738
|
+
{ "name": "top-end" },
|
|
739
|
+
{ "name": "top-start" },
|
|
740
|
+
{ "name": "bottom" },
|
|
741
|
+
{ "name": "bottom-end" },
|
|
742
|
+
{ "name": "bottom-start" }
|
|
741
743
|
]
|
|
742
744
|
},
|
|
743
745
|
{
|
|
744
|
-
"name": "
|
|
745
|
-
"description": "
|
|
746
|
+
"name": "help-text",
|
|
747
|
+
"description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
746
748
|
"values": []
|
|
747
749
|
},
|
|
748
750
|
{
|
|
749
|
-
"name": "
|
|
750
|
-
"description": "
|
|
751
|
+
"name": "form",
|
|
752
|
+
"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.",
|
|
751
753
|
"values": []
|
|
752
754
|
},
|
|
753
755
|
{
|
|
754
|
-
"name": "
|
|
755
|
-
"description": "
|
|
756
|
-
"values": [
|
|
756
|
+
"name": "required",
|
|
757
|
+
"description": "The select's required attribute.",
|
|
758
|
+
"values": []
|
|
757
759
|
}
|
|
758
760
|
],
|
|
759
761
|
"references": []
|
|
760
762
|
},
|
|
761
763
|
{
|
|
762
|
-
"name": "flow-ui-
|
|
763
|
-
"description": "
|
|
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.",
|
|
764
766
|
"attributes": [
|
|
765
767
|
{
|
|
766
|
-
"name": "
|
|
767
|
-
"description": "The
|
|
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.",
|
|
768
770
|
"values": []
|
|
769
771
|
},
|
|
770
772
|
{
|
|
771
|
-
"name": "
|
|
772
|
-
"description": "The
|
|
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.",
|
|
773
775
|
"values": []
|
|
774
776
|
},
|
|
775
777
|
{
|
|
776
|
-
"name": "
|
|
777
|
-
"description": "
|
|
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.",
|
|
778
780
|
"values": [
|
|
779
|
-
{ "name": "
|
|
780
|
-
{ "name": "
|
|
781
|
-
{ "name": "
|
|
781
|
+
{ "name": "hex" },
|
|
782
|
+
{ "name": "rgb" },
|
|
783
|
+
{ "name": "hsl" },
|
|
784
|
+
{ "name": "hsv" }
|
|
782
785
|
]
|
|
783
786
|
},
|
|
784
787
|
{
|
|
785
|
-
"name": "
|
|
786
|
-
"description": "
|
|
787
|
-
"values": []
|
|
788
|
-
},
|
|
789
|
-
{
|
|
790
|
-
"name": "timezone",
|
|
791
|
-
"description": "Set the timezone for display. If not set the default timezone will be used. (TZ name e.g. `'Europe/London'`)",
|
|
792
|
-
"values": []
|
|
793
|
-
},
|
|
794
|
-
{
|
|
795
|
-
"name": "locale",
|
|
796
|
-
"description": "Set the locale for display. If not set the default locale will be used. (e.g `'en-GB'`)",
|
|
788
|
+
"name": "inline",
|
|
789
|
+
"description": "Renders the color picker inline rather than in a dropdown.",
|
|
797
790
|
"values": []
|
|
798
791
|
},
|
|
799
792
|
{
|
|
800
793
|
"name": "size",
|
|
801
|
-
"description": "
|
|
794
|
+
"description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
|
|
802
795
|
"values": [
|
|
803
796
|
{ "name": "small" },
|
|
804
797
|
{ "name": "medium" },
|
|
@@ -806,61 +799,68 @@
|
|
|
806
799
|
]
|
|
807
800
|
},
|
|
808
801
|
{
|
|
809
|
-
"name": "
|
|
810
|
-
"description": "
|
|
802
|
+
"name": "no-format-toggle",
|
|
803
|
+
"description": "Removes the button that lets users toggle between format.",
|
|
811
804
|
"values": []
|
|
812
805
|
},
|
|
813
806
|
{
|
|
814
|
-
"name": "
|
|
815
|
-
"description": "
|
|
807
|
+
"name": "name",
|
|
808
|
+
"description": "The name of the form control, submitted as a name/value pair with form data.",
|
|
816
809
|
"values": []
|
|
817
810
|
},
|
|
818
811
|
{
|
|
819
|
-
"name": "
|
|
820
|
-
"description": "
|
|
812
|
+
"name": "disabled",
|
|
813
|
+
"description": "Disables the color picker.",
|
|
821
814
|
"values": []
|
|
822
815
|
},
|
|
823
816
|
{
|
|
824
|
-
"name": "
|
|
825
|
-
"description": "
|
|
826
|
-
"values": [
|
|
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
|
+
]
|
|
827
834
|
},
|
|
828
835
|
{
|
|
829
|
-
"name": "
|
|
830
|
-
"description": "
|
|
836
|
+
"name": "distance",
|
|
837
|
+
"description": "The distance in pixels from which to offset the panel away from its trigger.",
|
|
831
838
|
"values": []
|
|
832
839
|
},
|
|
833
840
|
{
|
|
834
|
-
"name": "
|
|
835
|
-
"description": "
|
|
841
|
+
"name": "skidding",
|
|
842
|
+
"description": "The distance in pixels from which to offset the panel along its trigger.",
|
|
836
843
|
"values": []
|
|
837
844
|
},
|
|
838
845
|
{
|
|
839
|
-
"name": "
|
|
840
|
-
"description": "
|
|
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.",
|
|
841
848
|
"values": []
|
|
842
849
|
},
|
|
843
850
|
{
|
|
844
|
-
"name": "
|
|
845
|
-
"description": "
|
|
851
|
+
"name": "opacity",
|
|
852
|
+
"description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
|
|
846
853
|
"values": []
|
|
847
854
|
},
|
|
848
855
|
{
|
|
849
|
-
"name": "
|
|
850
|
-
"description": "
|
|
851
|
-
"values": [
|
|
852
|
-
{ "name": "top" },
|
|
853
|
-
{ "name": "top-end" },
|
|
854
|
-
{ "name": "top-start" },
|
|
855
|
-
{ "name": "bottom" },
|
|
856
|
-
{ "name": "bottom-end" },
|
|
857
|
-
{ "name": "bottom-start" }
|
|
858
|
-
]
|
|
856
|
+
"name": "uppercase",
|
|
857
|
+
"description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
|
|
858
|
+
"values": []
|
|
859
859
|
},
|
|
860
860
|
{
|
|
861
|
-
"name": "
|
|
862
|
-
"description": "
|
|
863
|
-
"values": []
|
|
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
864
|
},
|
|
865
865
|
{
|
|
866
866
|
"name": "form",
|
|
@@ -869,7 +869,7 @@
|
|
|
869
869
|
},
|
|
870
870
|
{
|
|
871
871
|
"name": "required",
|
|
872
|
-
"description": "
|
|
872
|
+
"description": "Makes the color picker a required field.",
|
|
873
873
|
"values": []
|
|
874
874
|
}
|
|
875
875
|
],
|
|
@@ -2401,28 +2401,6 @@
|
|
|
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
|
-
},
|
|
2426
2404
|
{
|
|
2427
2405
|
"name": "flow-ui-tag",
|
|
2428
2406
|
"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.",
|
|
@@ -2612,80 +2590,6 @@
|
|
|
2612
2590
|
],
|
|
2613
2591
|
"references": []
|
|
2614
2592
|
},
|
|
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
|
-
},
|
|
2689
2593
|
{
|
|
2690
2594
|
"name": "flow-ui-tool-button",
|
|
2691
2595
|
"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.",
|
|
@@ -2784,68 +2688,97 @@
|
|
|
2784
2688
|
"references": []
|
|
2785
2689
|
},
|
|
2786
2690
|
{
|
|
2787
|
-
"name": "flow-ui-
|
|
2788
|
-
"description": "
|
|
2691
|
+
"name": "flow-ui-tab-panel",
|
|
2692
|
+
"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.",
|
|
2789
2693
|
"attributes": [
|
|
2790
2694
|
{
|
|
2791
|
-
"name": "
|
|
2792
|
-
"description": "The
|
|
2695
|
+
"name": "name",
|
|
2696
|
+
"description": "The tab panel's name.",
|
|
2793
2697
|
"values": []
|
|
2794
2698
|
},
|
|
2795
2699
|
{
|
|
2796
|
-
"name": "
|
|
2797
|
-
"description": "
|
|
2700
|
+
"name": "active",
|
|
2701
|
+
"description": "When true, the tab panel will be shown.",
|
|
2798
2702
|
"values": []
|
|
2799
2703
|
},
|
|
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": [
|
|
2800
2716
|
{
|
|
2801
2717
|
"name": "value",
|
|
2802
|
-
"description": "The
|
|
2803
|
-
"values": [
|
|
2718
|
+
"description": "The value of the timer. (ISO8601 date/time string)",
|
|
2719
|
+
"values": []
|
|
2804
2720
|
},
|
|
2805
2721
|
{
|
|
2806
|
-
"name": "
|
|
2807
|
-
"description": "The
|
|
2808
|
-
"values": [
|
|
2809
|
-
{ "name": "x-small" },
|
|
2810
|
-
{ "name": "small" },
|
|
2811
|
-
{ "name": "medium" },
|
|
2812
|
-
{ "name": "large" }
|
|
2813
|
-
]
|
|
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": []
|
|
2814
2725
|
},
|
|
2815
2726
|
{
|
|
2816
|
-
"name": "
|
|
2817
|
-
"description": "
|
|
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.",
|
|
2818
2729
|
"values": []
|
|
2819
2730
|
},
|
|
2820
2731
|
{
|
|
2821
|
-
"name": "
|
|
2822
|
-
"description": "
|
|
2732
|
+
"name": "running",
|
|
2733
|
+
"description": "Set to `true` to start the timer running.",
|
|
2823
2734
|
"values": []
|
|
2824
2735
|
},
|
|
2825
2736
|
{
|
|
2826
|
-
"name": "
|
|
2827
|
-
"
|
|
2828
|
-
|
|
2829
|
-
{ "name": "secondary" },
|
|
2830
|
-
{ "name": "success" },
|
|
2831
|
-
{ "name": "warning" },
|
|
2832
|
-
{ "name": "danger" },
|
|
2833
|
-
{ "name": "neutral" }
|
|
2834
|
-
]
|
|
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": []
|
|
2835
2740
|
},
|
|
2836
2741
|
{
|
|
2837
|
-
"name": "
|
|
2838
|
-
"description": "
|
|
2742
|
+
"name": "dayFormat",
|
|
2743
|
+
"description": "The day format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2839
2744
|
"values": []
|
|
2840
2745
|
},
|
|
2841
2746
|
{
|
|
2842
|
-
"name": "
|
|
2843
|
-
"description": "
|
|
2747
|
+
"name": "timeFormat",
|
|
2748
|
+
"description": "The time format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2844
2749
|
"values": []
|
|
2845
2750
|
},
|
|
2846
2751
|
{
|
|
2847
|
-
"name": "
|
|
2848
|
-
"
|
|
2752
|
+
"name": "zoneFormat",
|
|
2753
|
+
"description": "The timezone format to use for display as a [Luxon format string](https://moment.github.io/luxon/#/formatting?id=table-of-tokens).",
|
|
2754
|
+
"values": []
|
|
2755
|
+
},
|
|
2756
|
+
{
|
|
2757
|
+
"name": "major-step",
|
|
2758
|
+
"description": "The major step size to use for the timer step controls.",
|
|
2759
|
+
"values": []
|
|
2760
|
+
},
|
|
2761
|
+
{
|
|
2762
|
+
"name": "minor-step",
|
|
2763
|
+
"description": "The minor step size to use for the timer step controls.",
|
|
2764
|
+
"values": []
|
|
2765
|
+
},
|
|
2766
|
+
{
|
|
2767
|
+
"name": "hide-zone",
|
|
2768
|
+
"description": "Set to `true` to hide the timezone display.",
|
|
2769
|
+
"values": []
|
|
2770
|
+
},
|
|
2771
|
+
{
|
|
2772
|
+
"name": "placement",
|
|
2773
|
+
"description": "The placement of the calendar popup relative to the timer control.",
|
|
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
|
+
]
|
|
2849
2782
|
}
|
|
2850
2783
|
],
|
|
2851
2784
|
"references": []
|
|
@@ -2982,6 +2915,73 @@
|
|
|
2982
2915
|
],
|
|
2983
2916
|
"references": []
|
|
2984
2917
|
},
|
|
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.",
|