@emuanalytics/flow-rdf-ui 4.0.10 → 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 +4067 -4067
- package/dist/package.json.mjs +1 -1
- package/dist/vscode.html-custom-data.json +364 -364
- package/package.json +2 -2
|
@@ -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.",
|
|
@@ -126,6 +92,52 @@
|
|
|
126
92
|
],
|
|
127
93
|
"references": []
|
|
128
94
|
},
|
|
95
|
+
{
|
|
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.",
|
|
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
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"name": "variant",
|
|
111
|
+
"description": "The alert's theme variant.",
|
|
112
|
+
"values": [
|
|
113
|
+
{ "name": "primary" },
|
|
114
|
+
{ "name": "secondary" },
|
|
115
|
+
{ "name": "success" },
|
|
116
|
+
{ "name": "neutral" },
|
|
117
|
+
{ "name": "warning" },
|
|
118
|
+
{ "name": "danger" }
|
|
119
|
+
]
|
|
120
|
+
},
|
|
121
|
+
{
|
|
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.",
|
|
124
|
+
"values": []
|
|
125
|
+
}
|
|
126
|
+
],
|
|
127
|
+
"references": []
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"name": "flow-ui-breadcrumb",
|
|
131
|
+
"description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
132
|
+
"attributes": [
|
|
133
|
+
{
|
|
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.",
|
|
136
|
+
"values": []
|
|
137
|
+
}
|
|
138
|
+
],
|
|
139
|
+
"references": []
|
|
140
|
+
},
|
|
129
141
|
{
|
|
130
142
|
"name": "flow-ui-breadcrumb-item",
|
|
131
143
|
"description": "Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
|
|
@@ -304,12 +316,17 @@
|
|
|
304
316
|
"references": []
|
|
305
317
|
},
|
|
306
318
|
{
|
|
307
|
-
"name": "flow-ui-
|
|
308
|
-
"description": "
|
|
319
|
+
"name": "flow-ui-button-group",
|
|
320
|
+
"description": "Button groups can be used to group related buttons into sections.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more `<flow-ui-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
309
321
|
"attributes": [
|
|
310
322
|
{
|
|
311
323
|
"name": "label",
|
|
312
|
-
"description": "
|
|
324
|
+
"description": "Text label for assistive devices.",
|
|
325
|
+
"values": []
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"name": "vertical",
|
|
329
|
+
"description": "Use vertical layout for the button group.",
|
|
313
330
|
"values": []
|
|
314
331
|
}
|
|
315
332
|
],
|
|
@@ -351,29 +368,6 @@
|
|
|
351
368
|
],
|
|
352
369
|
"references": []
|
|
353
370
|
},
|
|
354
|
-
{
|
|
355
|
-
"name": "flow-ui-button-group",
|
|
356
|
-
"description": "Button groups can be used to group related buttons into sections.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more `<flow-ui-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
357
|
-
"attributes": [
|
|
358
|
-
{
|
|
359
|
-
"name": "label",
|
|
360
|
-
"description": "Text label for assistive devices.",
|
|
361
|
-
"values": []
|
|
362
|
-
},
|
|
363
|
-
{
|
|
364
|
-
"name": "vertical",
|
|
365
|
-
"description": "Use vertical layout for the button group.",
|
|
366
|
-
"values": []
|
|
367
|
-
}
|
|
368
|
-
],
|
|
369
|
-
"references": []
|
|
370
|
-
},
|
|
371
|
-
{
|
|
372
|
-
"name": "flow-ui-card",
|
|
373
|
-
"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.",
|
|
374
|
-
"attributes": [],
|
|
375
|
-
"references": []
|
|
376
|
-
},
|
|
377
371
|
{
|
|
378
372
|
"name": "flow-ui-calendar",
|
|
379
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.",
|
|
@@ -414,6 +408,12 @@
|
|
|
414
408
|
],
|
|
415
409
|
"references": []
|
|
416
410
|
},
|
|
411
|
+
{
|
|
412
|
+
"name": "flow-ui-card",
|
|
413
|
+
"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.",
|
|
414
|
+
"attributes": [],
|
|
415
|
+
"references": []
|
|
416
|
+
},
|
|
417
417
|
{
|
|
418
418
|
"name": "flow-ui-carousel",
|
|
419
419
|
"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.",
|
|
@@ -587,121 +587,6 @@
|
|
|
587
587
|
],
|
|
588
588
|
"references": []
|
|
589
589
|
},
|
|
590
|
-
{
|
|
591
|
-
"name": "flow-ui-color-picker",
|
|
592
|
-
"description": "Color pickers allow the user to select a color.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the color picker loses focus.\n- **flow-ui-change** - Emitted when the color picker's value changes.\n- **flow-ui-focus** - Emitted when the color picker receives focus.\n- **flow-ui-input** - Emitted when the color picker receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
|
|
593
|
-
"attributes": [
|
|
594
|
-
{
|
|
595
|
-
"name": "value",
|
|
596
|
-
"description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
|
|
597
|
-
"values": []
|
|
598
|
-
},
|
|
599
|
-
{
|
|
600
|
-
"name": "label",
|
|
601
|
-
"description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
|
|
602
|
-
"values": []
|
|
603
|
-
},
|
|
604
|
-
{
|
|
605
|
-
"name": "format",
|
|
606
|
-
"description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
|
|
607
|
-
"values": [
|
|
608
|
-
{ "name": "hex" },
|
|
609
|
-
{ "name": "rgb" },
|
|
610
|
-
{ "name": "hsl" },
|
|
611
|
-
{ "name": "hsv" }
|
|
612
|
-
]
|
|
613
|
-
},
|
|
614
|
-
{
|
|
615
|
-
"name": "inline",
|
|
616
|
-
"description": "Renders the color picker inline rather than in a dropdown.",
|
|
617
|
-
"values": []
|
|
618
|
-
},
|
|
619
|
-
{
|
|
620
|
-
"name": "size",
|
|
621
|
-
"description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
|
|
622
|
-
"values": [
|
|
623
|
-
{ "name": "small" },
|
|
624
|
-
{ "name": "medium" },
|
|
625
|
-
{ "name": "large" }
|
|
626
|
-
]
|
|
627
|
-
},
|
|
628
|
-
{
|
|
629
|
-
"name": "no-format-toggle",
|
|
630
|
-
"description": "Removes the button that lets users toggle between format.",
|
|
631
|
-
"values": []
|
|
632
|
-
},
|
|
633
|
-
{
|
|
634
|
-
"name": "name",
|
|
635
|
-
"description": "The name of the form control, submitted as a name/value pair with form data.",
|
|
636
|
-
"values": []
|
|
637
|
-
},
|
|
638
|
-
{
|
|
639
|
-
"name": "disabled",
|
|
640
|
-
"description": "Disables the color picker.",
|
|
641
|
-
"values": []
|
|
642
|
-
},
|
|
643
|
-
{
|
|
644
|
-
"name": "placement",
|
|
645
|
-
"description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
|
|
646
|
-
"values": [
|
|
647
|
-
{ "name": "" },
|
|
648
|
-
{ "name": "top" },
|
|
649
|
-
{ "name": "top-start" },
|
|
650
|
-
{ "name": "top-end" },
|
|
651
|
-
{ "name": "bottom" },
|
|
652
|
-
{ "name": "bottom-start" },
|
|
653
|
-
{ "name": "bottom-end" },
|
|
654
|
-
{ "name": "right" },
|
|
655
|
-
{ "name": "right-start" },
|
|
656
|
-
{ "name": "right-end" },
|
|
657
|
-
{ "name": "left" },
|
|
658
|
-
{ "name": "left-start" },
|
|
659
|
-
{ "name": "left-end" }
|
|
660
|
-
]
|
|
661
|
-
},
|
|
662
|
-
{
|
|
663
|
-
"name": "distance",
|
|
664
|
-
"description": "The distance in pixels from which to offset the panel away from its trigger.",
|
|
665
|
-
"values": []
|
|
666
|
-
},
|
|
667
|
-
{
|
|
668
|
-
"name": "skidding",
|
|
669
|
-
"description": "The distance in pixels from which to offset the panel along its trigger.",
|
|
670
|
-
"values": []
|
|
671
|
-
},
|
|
672
|
-
{
|
|
673
|
-
"name": "hoist",
|
|
674
|
-
"description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
|
|
675
|
-
"values": []
|
|
676
|
-
},
|
|
677
|
-
{
|
|
678
|
-
"name": "opacity",
|
|
679
|
-
"description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
|
|
680
|
-
"values": []
|
|
681
|
-
},
|
|
682
|
-
{
|
|
683
|
-
"name": "uppercase",
|
|
684
|
-
"description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
|
|
685
|
-
"values": []
|
|
686
|
-
},
|
|
687
|
-
{
|
|
688
|
-
"name": "swatches",
|
|
689
|
-
"description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
|
|
690
|
-
"values": [{ "name": "string[]" }]
|
|
691
|
-
},
|
|
692
|
-
{
|
|
693
|
-
"name": "form",
|
|
694
|
-
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
695
|
-
"values": []
|
|
696
|
-
},
|
|
697
|
-
{
|
|
698
|
-
"name": "required",
|
|
699
|
-
"description": "Makes the color picker a required field.",
|
|
700
|
-
"values": []
|
|
701
|
-
}
|
|
702
|
-
],
|
|
703
|
-
"references": []
|
|
704
|
-
},
|
|
705
590
|
{
|
|
706
591
|
"name": "flow-ui-color-stop",
|
|
707
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.",
|
|
@@ -876,29 +761,144 @@
|
|
|
876
761
|
"references": []
|
|
877
762
|
},
|
|
878
763
|
{
|
|
879
|
-
"name": "flow-ui-
|
|
880
|
-
"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.",
|
|
881
766
|
"attributes": [
|
|
882
767
|
{
|
|
883
|
-
"name": "
|
|
884
|
-
"description": "
|
|
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.",
|
|
885
770
|
"values": []
|
|
886
771
|
},
|
|
887
772
|
{
|
|
888
|
-
"name": "
|
|
889
|
-
"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.",
|
|
890
775
|
"values": []
|
|
891
776
|
},
|
|
892
777
|
{
|
|
893
|
-
"name": "
|
|
894
|
-
"description": "
|
|
895
|
-
"values": [
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
778
|
+
"name": "format",
|
|
779
|
+
"description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
|
|
780
|
+
"values": [
|
|
781
|
+
{ "name": "hex" },
|
|
782
|
+
{ "name": "rgb" },
|
|
783
|
+
{ "name": "hsl" },
|
|
784
|
+
{ "name": "hsv" }
|
|
785
|
+
]
|
|
786
|
+
},
|
|
787
|
+
{
|
|
788
|
+
"name": "inline",
|
|
789
|
+
"description": "Renders the color picker inline rather than in a dropdown.",
|
|
790
|
+
"values": []
|
|
791
|
+
},
|
|
792
|
+
{
|
|
793
|
+
"name": "size",
|
|
794
|
+
"description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
|
|
795
|
+
"values": [
|
|
796
|
+
{ "name": "small" },
|
|
797
|
+
{ "name": "medium" },
|
|
798
|
+
{ "name": "large" }
|
|
799
|
+
]
|
|
800
|
+
},
|
|
801
|
+
{
|
|
802
|
+
"name": "no-format-toggle",
|
|
803
|
+
"description": "Removes the button that lets users toggle between format.",
|
|
804
|
+
"values": []
|
|
805
|
+
},
|
|
806
|
+
{
|
|
807
|
+
"name": "name",
|
|
808
|
+
"description": "The name of the form control, submitted as a name/value pair with form data.",
|
|
809
|
+
"values": []
|
|
810
|
+
},
|
|
811
|
+
{
|
|
812
|
+
"name": "disabled",
|
|
813
|
+
"description": "Disables the color picker.",
|
|
814
|
+
"values": []
|
|
815
|
+
},
|
|
816
|
+
{
|
|
817
|
+
"name": "placement",
|
|
818
|
+
"description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
|
|
819
|
+
"values": [
|
|
820
|
+
{ "name": "" },
|
|
821
|
+
{ "name": "top" },
|
|
822
|
+
{ "name": "top-start" },
|
|
823
|
+
{ "name": "top-end" },
|
|
824
|
+
{ "name": "bottom" },
|
|
825
|
+
{ "name": "bottom-start" },
|
|
826
|
+
{ "name": "bottom-end" },
|
|
827
|
+
{ "name": "right" },
|
|
828
|
+
{ "name": "right-start" },
|
|
829
|
+
{ "name": "right-end" },
|
|
830
|
+
{ "name": "left" },
|
|
831
|
+
{ "name": "left-start" },
|
|
832
|
+
{ "name": "left-end" }
|
|
833
|
+
]
|
|
834
|
+
},
|
|
835
|
+
{
|
|
836
|
+
"name": "distance",
|
|
837
|
+
"description": "The distance in pixels from which to offset the panel away from its trigger.",
|
|
838
|
+
"values": []
|
|
839
|
+
},
|
|
840
|
+
{
|
|
841
|
+
"name": "skidding",
|
|
842
|
+
"description": "The distance in pixels from which to offset the panel along its trigger.",
|
|
843
|
+
"values": []
|
|
844
|
+
},
|
|
845
|
+
{
|
|
846
|
+
"name": "hoist",
|
|
847
|
+
"description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
|
|
848
|
+
"values": []
|
|
849
|
+
},
|
|
850
|
+
{
|
|
851
|
+
"name": "opacity",
|
|
852
|
+
"description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
|
|
853
|
+
"values": []
|
|
854
|
+
},
|
|
855
|
+
{
|
|
856
|
+
"name": "uppercase",
|
|
857
|
+
"description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
|
|
858
|
+
"values": []
|
|
859
|
+
},
|
|
860
|
+
{
|
|
861
|
+
"name": "swatches",
|
|
862
|
+
"description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
|
|
863
|
+
"values": [{ "name": "string[]" }]
|
|
864
|
+
},
|
|
865
|
+
{
|
|
866
|
+
"name": "form",
|
|
867
|
+
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
868
|
+
"values": []
|
|
869
|
+
},
|
|
870
|
+
{
|
|
871
|
+
"name": "required",
|
|
872
|
+
"description": "Makes the color picker a required field.",
|
|
873
|
+
"values": []
|
|
874
|
+
}
|
|
875
|
+
],
|
|
876
|
+
"references": []
|
|
877
|
+
},
|
|
878
|
+
{
|
|
879
|
+
"name": "flow-ui-details",
|
|
880
|
+
"description": "Details show a brief summary and expand to show additional content.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the details opens.\n- **flow-ui-after-show** - Emitted after the details opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the details closes.\n- **flow-ui-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<flow-ui-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.",
|
|
881
|
+
"attributes": [
|
|
882
|
+
{
|
|
883
|
+
"name": "open",
|
|
884
|
+
"description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
|
|
885
|
+
"values": []
|
|
886
|
+
},
|
|
887
|
+
{
|
|
888
|
+
"name": "summary",
|
|
889
|
+
"description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
|
|
890
|
+
"values": []
|
|
891
|
+
},
|
|
892
|
+
{
|
|
893
|
+
"name": "disabled",
|
|
894
|
+
"description": "Disables the details so it can't be toggled.",
|
|
895
|
+
"values": []
|
|
896
|
+
}
|
|
897
|
+
],
|
|
898
|
+
"references": []
|
|
899
|
+
},
|
|
900
|
+
{
|
|
901
|
+
"name": "flow-ui-dialog",
|
|
902
902
|
"description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-show** - Emitted when the dialog opens.\n- **flow-ui-after-show** - Emitted after the dialog opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the dialog closes.\n- **flow-ui-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **flow-ui-initial-focus** - Emitted when the dialog 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 dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog'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 dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog 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 dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog'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 dialog'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 dialog's body.\n- **footer** - The dialog's footer.",
|
|
903
903
|
"attributes": [
|
|
904
904
|
{
|
|
@@ -1827,6 +1827,49 @@
|
|
|
1827
1827
|
],
|
|
1828
1828
|
"references": []
|
|
1829
1829
|
},
|
|
1830
|
+
{
|
|
1831
|
+
"name": "flow-ui-radio",
|
|
1832
|
+
"description": "Radios allow the user to select a single option from a group.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<flow-ui-icon>` element.\n- **label** - The container that wraps the radio's label.",
|
|
1833
|
+
"attributes": [
|
|
1834
|
+
{
|
|
1835
|
+
"name": "value",
|
|
1836
|
+
"description": "The radio's value. When selected, the radio group will receive this value.",
|
|
1837
|
+
"values": []
|
|
1838
|
+
},
|
|
1839
|
+
{
|
|
1840
|
+
"name": "size",
|
|
1841
|
+
"description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
|
|
1842
|
+
"values": [
|
|
1843
|
+
{ "name": "small" },
|
|
1844
|
+
{ "name": "medium" },
|
|
1845
|
+
{ "name": "large" }
|
|
1846
|
+
]
|
|
1847
|
+
},
|
|
1848
|
+
{
|
|
1849
|
+
"name": "variant",
|
|
1850
|
+
"description": "The radio's variant color.",
|
|
1851
|
+
"values": [
|
|
1852
|
+
{ "name": "primary" },
|
|
1853
|
+
{ "name": "secondary" },
|
|
1854
|
+
{ "name": "success" },
|
|
1855
|
+
{ "name": "warning" },
|
|
1856
|
+
{ "name": "danger" },
|
|
1857
|
+
{ "name": "neutral" }
|
|
1858
|
+
]
|
|
1859
|
+
},
|
|
1860
|
+
{
|
|
1861
|
+
"name": "disabled",
|
|
1862
|
+
"description": "Disables the radio.",
|
|
1863
|
+
"values": []
|
|
1864
|
+
},
|
|
1865
|
+
{
|
|
1866
|
+
"name": "full-width",
|
|
1867
|
+
"description": "Display the radio using the alternative 'full-width' style with left-aligned label.",
|
|
1868
|
+
"values": []
|
|
1869
|
+
}
|
|
1870
|
+
],
|
|
1871
|
+
"references": []
|
|
1872
|
+
},
|
|
1830
1873
|
{
|
|
1831
1874
|
"name": "flow-ui-radio-group",
|
|
1832
1875
|
"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.",
|
|
@@ -1962,49 +2005,6 @@
|
|
|
1962
2005
|
],
|
|
1963
2006
|
"references": []
|
|
1964
2007
|
},
|
|
1965
|
-
{
|
|
1966
|
-
"name": "flow-ui-radio",
|
|
1967
|
-
"description": "Radios allow the user to select a single option from a group.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<flow-ui-icon>` element.\n- **label** - The container that wraps the radio's label.",
|
|
1968
|
-
"attributes": [
|
|
1969
|
-
{
|
|
1970
|
-
"name": "value",
|
|
1971
|
-
"description": "The radio's value. When selected, the radio group will receive this value.",
|
|
1972
|
-
"values": []
|
|
1973
|
-
},
|
|
1974
|
-
{
|
|
1975
|
-
"name": "size",
|
|
1976
|
-
"description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
|
|
1977
|
-
"values": [
|
|
1978
|
-
{ "name": "small" },
|
|
1979
|
-
{ "name": "medium" },
|
|
1980
|
-
{ "name": "large" }
|
|
1981
|
-
]
|
|
1982
|
-
},
|
|
1983
|
-
{
|
|
1984
|
-
"name": "variant",
|
|
1985
|
-
"description": "The radio's variant color.",
|
|
1986
|
-
"values": [
|
|
1987
|
-
{ "name": "primary" },
|
|
1988
|
-
{ "name": "secondary" },
|
|
1989
|
-
{ "name": "success" },
|
|
1990
|
-
{ "name": "warning" },
|
|
1991
|
-
{ "name": "danger" },
|
|
1992
|
-
{ "name": "neutral" }
|
|
1993
|
-
]
|
|
1994
|
-
},
|
|
1995
|
-
{
|
|
1996
|
-
"name": "disabled",
|
|
1997
|
-
"description": "Disables the radio.",
|
|
1998
|
-
"values": []
|
|
1999
|
-
},
|
|
2000
|
-
{
|
|
2001
|
-
"name": "full-width",
|
|
2002
|
-
"description": "Display the radio using the alternative 'full-width' style with left-aligned label.",
|
|
2003
|
-
"values": []
|
|
2004
|
-
}
|
|
2005
|
-
],
|
|
2006
|
-
"references": []
|
|
2007
|
-
},
|
|
2008
2008
|
{
|
|
2009
2009
|
"name": "flow-ui-select",
|
|
2010
2010
|
"description": "Selects allow you to choose items from a menu of predefined options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-change** - Emitted when the control's value changes.\n- **flow-ui-clear** - Emitted when the control's value is cleared.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-show** - Emitted when the select's menu opens.\n- **flow-ui-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **flow-ui-hide** - Emitted when the select's menu closes.\n- **flow-ui-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
|
|
@@ -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.",
|