@emuanalytics/flow-rdf-ui 0.0.24 → 0.0.26

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.
@@ -96,82 +96,6 @@
96
96
  ],
97
97
  "references": []
98
98
  },
99
- {
100
- "name": "flow-ui-avatar",
101
- "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.",
102
- "attributes": [
103
- {
104
- "name": "image",
105
- "description": "The image source to use for the avatar.",
106
- "values": []
107
- },
108
- {
109
- "name": "label",
110
- "description": "A label to use to describe the avatar to assistive devices.",
111
- "values": []
112
- },
113
- {
114
- "name": "initials",
115
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
116
- "values": []
117
- },
118
- {
119
- "name": "loading",
120
- "description": "Indicates how the browser should load the image.",
121
- "values": [{ "name": "eager" }, { "name": "lazy" }]
122
- },
123
- {
124
- "name": "shape",
125
- "description": "The shape of the avatar.",
126
- "values": [
127
- { "name": "circle" },
128
- { "name": "square" },
129
- { "name": "rounded" }
130
- ]
131
- }
132
- ],
133
- "references": []
134
- },
135
- {
136
- "name": "flow-ui-badge",
137
- "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.",
138
- "attributes": [
139
- {
140
- "name": "variant",
141
- "description": "The badge's theme variant.",
142
- "values": [
143
- { "name": "primary" },
144
- { "name": "success" },
145
- { "name": "neutral" },
146
- { "name": "warning" },
147
- { "name": "danger" }
148
- ]
149
- },
150
- {
151
- "name": "pill",
152
- "description": "Draws a pill-style badge with rounded edges.",
153
- "values": []
154
- },
155
- {
156
- "name": "pulse",
157
- "description": "Makes the badge pulsate to draw attention.",
158
- "values": []
159
- }
160
- ],
161
- "references": []
162
- },
163
- {
164
- "name": "flow-ui-breadcrumb",
165
- "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.",
166
- "attributes": [
167
- {
168
- "name": "label",
169
- "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.",
170
- "values": []
171
- }
172
- ],
173
- "references": []
174
- },
175
99
  {
176
100
  "name": "flow-ui-breadcrumb-item",
177
101
  "description": "Breadcrumb Items are used inside [breadcrumbs](/components/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.",
@@ -200,13 +124,12 @@
200
124
  "references": []
201
125
  },
202
126
  {
203
- "name": "flow-ui-button-group",
204
- "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.",
127
+ "name": "flow-ui-breadcrumb",
128
+ "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.",
205
129
  "attributes": [
206
- { "name": "label", "values": [] },
207
130
  {
208
- "name": "vertical",
209
- "description": "Use vertical layout for the button group.",
131
+ "name": "label",
132
+ "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.",
210
133
  "values": []
211
134
  }
212
135
  ],
@@ -357,6 +280,83 @@
357
280
  ],
358
281
  "references": []
359
282
  },
283
+ {
284
+ "name": "flow-ui-button-group",
285
+ "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.",
286
+ "attributes": [
287
+ { "name": "label", "values": [] },
288
+ {
289
+ "name": "vertical",
290
+ "description": "Use vertical layout for the button group.",
291
+ "values": []
292
+ }
293
+ ],
294
+ "references": []
295
+ },
296
+ {
297
+ "name": "flow-ui-avatar",
298
+ "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.",
299
+ "attributes": [
300
+ {
301
+ "name": "image",
302
+ "description": "The image source to use for the avatar.",
303
+ "values": []
304
+ },
305
+ {
306
+ "name": "label",
307
+ "description": "A label to use to describe the avatar to assistive devices.",
308
+ "values": []
309
+ },
310
+ {
311
+ "name": "initials",
312
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
313
+ "values": []
314
+ },
315
+ {
316
+ "name": "loading",
317
+ "description": "Indicates how the browser should load the image.",
318
+ "values": [{ "name": "eager" }, { "name": "lazy" }]
319
+ },
320
+ {
321
+ "name": "shape",
322
+ "description": "The shape of the avatar.",
323
+ "values": [
324
+ { "name": "circle" },
325
+ { "name": "square" },
326
+ { "name": "rounded" }
327
+ ]
328
+ }
329
+ ],
330
+ "references": []
331
+ },
332
+ {
333
+ "name": "flow-ui-badge",
334
+ "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.",
335
+ "attributes": [
336
+ {
337
+ "name": "variant",
338
+ "description": "The badge's theme variant.",
339
+ "values": [
340
+ { "name": "primary" },
341
+ { "name": "success" },
342
+ { "name": "neutral" },
343
+ { "name": "warning" },
344
+ { "name": "danger" }
345
+ ]
346
+ },
347
+ {
348
+ "name": "pill",
349
+ "description": "Draws a pill-style badge with rounded edges.",
350
+ "values": []
351
+ },
352
+ {
353
+ "name": "pulse",
354
+ "description": "Makes the badge pulsate to draw attention.",
355
+ "values": []
356
+ }
357
+ ],
358
+ "references": []
359
+ },
360
360
  {
361
361
  "name": "flow-ui-card",
362
362
  "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.",
@@ -421,6 +421,33 @@
421
421
  "attributes": [],
422
422
  "references": []
423
423
  },
424
+ {
425
+ "name": "flow-ui-chart",
426
+ "description": "The chart component displays Chart.js charts.\n\n\n---\n\n\n\n\n### **Methods:**\n - **repaint()** - Trigger a repaint of the chart.\n\n### **CSS Properties:**\n - **--background-color** - Chart background color (applied as the background color of the base container). _(default: undefined)_\n- **--text-color** - General text color (titles etc.) _(default: undefined)_\n- **--axis-color** - Color of the axis lines. _(default: undefined)_\n- **--x-axis-color** - Color of the x-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--y-axis-color** - Color of the y-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--axis-grid-color** - Color of the axis grid lines. _(default: undefined)_\n- **--x-axis-grid-color** - Color of the x-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--y-axis-grid-color** - Color of the y-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--axis-label-color** - Color of the axis labels. _(default: undefined)_\n- **--x-axis-label-color** - Color of the x-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--y-axis-label-color** - Color of the y-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--tick-label-color** - Color of the tick labels. _(default: undefined)_\n- **--x-tick-label-color** - Color of the x-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--y-tick-label-color** - Color of the y-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--dataset-stroke-color-n** - Color of the stroke for dataset n (where n = 0-9). _(default: undefined)_\n- **--dataset-fill-color-n** - Color of the fill for dataset n (where n = 0-9). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the chart.",
427
+ "attributes": [
428
+ {
429
+ "name": "type",
430
+ "description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
431
+ "values": []
432
+ },
433
+ {
434
+ "name": "options",
435
+ "description": "The Chart.js `options` object.",
436
+ "values": [{ "name": "ChartOptions" }]
437
+ },
438
+ {
439
+ "name": "data",
440
+ "description": "The Chart.js `data` object",
441
+ "values": [{ "name": "ChartData" }]
442
+ },
443
+ {
444
+ "name": "plugins",
445
+ "description": "List of extra plugins to use for this chart.",
446
+ "values": [{ "name": "Plugin[]" }]
447
+ }
448
+ ],
449
+ "references": []
450
+ },
424
451
  {
425
452
  "name": "flow-ui-checkbox",
426
453
  "description": "Checkboxes allow the user to toggle an option on or off.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the checkbox loses focus.\n- **flow-ui-change** - Emitted when the checked state changes.\n- **flow-ui-focus** - Emitted when the checkbox gains focus.\n- **flow-ui-input** - Emitted when the checkbox 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 - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<flow-ui-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<flow-ui-icon>` element.\n- **label** - The container that wraps the checkbox's label.",
@@ -473,33 +500,6 @@
473
500
  ],
474
501
  "references": []
475
502
  },
476
- {
477
- "name": "flow-ui-chart",
478
- "description": "The chart component displays Chart.js charts.\n\n\n---\n\n\n\n\n### **Methods:**\n - **repaint()** - Trigger a repaint of the chart.\n\n### **CSS Properties:**\n - **--background-color** - Chart background color (applied as the background color of the base container). _(default: undefined)_\n- **--text-color** - General text color (titles etc.) _(default: undefined)_\n- **--axis-color** - Color of the axis lines. _(default: undefined)_\n- **--x-axis-color** - Color of the x-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--y-axis-color** - Color of the y-axis lines. (defaults to `--axis-color`) _(default: undefined)_\n- **--axis-grid-color** - Color of the axis grid lines. _(default: undefined)_\n- **--x-axis-grid-color** - Color of the x-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--y-axis-grid-color** - Color of the y-axis grid lines. (defaults to `--axis-grid-color`) _(default: undefined)_\n- **--axis-label-color** - Color of the axis labels. _(default: undefined)_\n- **--x-axis-label-color** - Color of the x-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--y-axis-label-color** - Color of the y-axis labels. (defaults to `--axis-label-color`) _(default: undefined)_\n- **--tick-label-color** - Color of the tick labels. _(default: undefined)_\n- **--x-tick-label-color** - Color of the x-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--y-tick-label-color** - Color of the y-axis tick labels. (defaults to `--tick-label-color`) _(default: undefined)_\n- **--dataset-stroke-color-n** - Color of the stroke for dataset n (where n = 0-9). _(default: undefined)_\n- **--dataset-fill-color-n** - Color of the fill for dataset n (where n = 0-9). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the chart.",
479
- "attributes": [
480
- {
481
- "name": "type",
482
- "description": "The Chart.js chart type (e.g `line`, `bar` or a custom type).",
483
- "values": []
484
- },
485
- {
486
- "name": "options",
487
- "description": "The Chart.js `options` object.",
488
- "values": [{ "name": "ChartOptions" }]
489
- },
490
- {
491
- "name": "data",
492
- "description": "The Chart.js `data` object",
493
- "values": [{ "name": "ChartData" }]
494
- },
495
- {
496
- "name": "plugins",
497
- "description": "List of extra plugins to use for this chart.",
498
- "values": [{ "name": "Plugin[]" }]
499
- }
500
- ],
501
- "references": []
502
- },
503
503
  {
504
504
  "name": "flow-ui-color-mapper",
505
505
  "description": "\n\n\n---\n\n\n",
@@ -1073,175 +1073,36 @@
1073
1073
  "references": []
1074
1074
  },
1075
1075
  {
1076
- "name": "flow-ui-option",
1077
- "description": "Options define the selectable items within various form controls such as [select](/components/select).\n\n\n---\n\n\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, a `<flow-ui-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
1076
+ "name": "flow-ui-progress-bar",
1077
+ "description": "Progress bars are used to show the status of an ongoing operation.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
1078
1078
  "attributes": [
1079
1079
  {
1080
1080
  "name": "value",
1081
- "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
1082
- "values": []
1083
- },
1084
- {
1085
- "name": "disabled",
1086
- "description": "Draws the option in a disabled state, preventing selection.",
1087
- "values": []
1088
- }
1089
- ],
1090
- "references": []
1091
- },
1092
- {
1093
- "name": "flow-ui-popup",
1094
- "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--flow-ui-color-neutral-0))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.",
1095
- "attributes": [
1096
- {
1097
- "name": "anchor",
1098
- "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\nreference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.",
1099
- "values": [{ "name": "Element" }]
1100
- },
1101
- {
1102
- "name": "active",
1103
- "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
1104
- "values": []
1105
- },
1106
- {
1107
- "name": "placement",
1108
- "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
1109
- "values": [
1110
- { "name": "" },
1111
- { "name": "top" },
1112
- { "name": "top-start" },
1113
- { "name": "top-end" },
1114
- { "name": "bottom" },
1115
- { "name": "bottom-start" },
1116
- { "name": "bottom-end" },
1117
- { "name": "right" },
1118
- { "name": "right-start" },
1119
- { "name": "right-end" },
1120
- { "name": "left" },
1121
- { "name": "left-start" },
1122
- { "name": "left-end" }
1123
- ]
1124
- },
1125
- {
1126
- "name": "strategy",
1127
- "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
1128
- "values": [{ "name": "absolute" }, { "name": "fixed" }]
1129
- },
1130
- {
1131
- "name": "distance",
1132
- "description": "The distance in pixels from which to offset the panel away from its anchor.",
1133
- "values": []
1134
- },
1135
- {
1136
- "name": "skidding",
1137
- "description": "The distance in pixels from which to offset the panel along its anchor.",
1138
- "values": []
1139
- },
1140
- {
1141
- "name": "arrow",
1142
- "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
1143
- "values": []
1144
- },
1145
- {
1146
- "name": "arrow-placement",
1147
- "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
1148
- "values": [
1149
- { "name": "start" },
1150
- { "name": "end" },
1151
- { "name": "center" },
1152
- { "name": "anchor" }
1153
- ]
1154
- },
1155
- {
1156
- "name": "arrow-padding",
1157
- "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
1158
- "values": []
1159
- },
1160
- {
1161
- "name": "flip",
1162
- "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
1163
- "values": []
1164
- },
1165
- {
1166
- "name": "flip-fallback-placements",
1167
- "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
1168
- "values": []
1169
- },
1170
- {
1171
- "name": "flip-fallback-strategy",
1172
- "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
1173
- "values": [{ "name": "best-fit" }, { "name": "initial" }]
1174
- },
1175
- {
1176
- "name": "flipBoundary",
1177
- "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
1178
- "values": [{ "name": "Element" }, { "name": "Element[]" }]
1179
- },
1180
- {
1181
- "name": "flip-padding",
1182
- "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
1183
- "values": []
1184
- },
1185
- {
1186
- "name": "shift",
1187
- "description": "Moves the popup along the axis to keep it in view when clipped.",
1081
+ "description": "The current progress as a percentage, 0 to 100.",
1188
1082
  "values": []
1189
1083
  },
1190
1084
  {
1191
- "name": "shiftBoundary",
1192
- "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
1193
- "values": [{ "name": "Element" }, { "name": "Element[]" }]
1194
- },
1195
- {
1196
- "name": "shift-padding",
1197
- "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
1085
+ "name": "indeterminate",
1086
+ "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
1198
1087
  "values": []
1199
1088
  },
1200
1089
  {
1201
- "name": "auto-size",
1202
- "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
1203
- "values": [
1204
- { "name": "horizontal" },
1205
- { "name": "vertical" },
1206
- { "name": "both" }
1207
- ]
1208
- },
1209
- {
1210
- "name": "sync",
1211
- "description": "Syncs the popup's width or height to that of the anchor element.",
1212
- "values": [
1213
- { "name": "width" },
1214
- { "name": "height" },
1215
- { "name": "both" }
1216
- ]
1217
- },
1218
- {
1219
- "name": "autoSizeBoundary",
1220
- "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
1221
- "values": [{ "name": "Element" }, { "name": "Element[]" }]
1222
- },
1223
- {
1224
- "name": "auto-size-padding",
1225
- "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
1090
+ "name": "label",
1091
+ "description": "A custom label for assistive devices.",
1226
1092
  "values": []
1227
1093
  }
1228
1094
  ],
1229
1095
  "references": []
1230
1096
  },
1231
1097
  {
1232
- "name": "flow-ui-progress-bar",
1233
- "description": "Progress bars are used to show the status of an ongoing operation.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
1098
+ "name": "flow-ui-progress-ring",
1099
+ "description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
1234
1100
  "attributes": [
1235
1101
  {
1236
1102
  "name": "value",
1237
1103
  "description": "The current progress as a percentage, 0 to 100.",
1238
1104
  "values": []
1239
1105
  },
1240
- {
1241
- "name": "indeterminate",
1242
- "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
1243
- "values": []
1244
- },
1245
1106
  {
1246
1107
  "name": "label",
1247
1108
  "description": "A custom label for assistive devices.",
@@ -1251,17 +1112,26 @@
1251
1112
  "references": []
1252
1113
  },
1253
1114
  {
1254
- "name": "flow-ui-progress-ring",
1255
- "description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
1115
+ "name": "flow-ui-radio",
1116
+ "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.",
1256
1117
  "attributes": [
1257
1118
  {
1258
1119
  "name": "value",
1259
- "description": "The current progress as a percentage, 0 to 100.",
1120
+ "description": "The radio's value. When selected, the radio group will receive this value.",
1260
1121
  "values": []
1261
1122
  },
1262
1123
  {
1263
- "name": "label",
1264
- "description": "A custom label for assistive devices.",
1124
+ "name": "size",
1125
+ "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.",
1126
+ "values": [
1127
+ { "name": "small" },
1128
+ { "name": "medium" },
1129
+ { "name": "large" }
1130
+ ]
1131
+ },
1132
+ {
1133
+ "name": "disabled",
1134
+ "description": "Disables the radio.",
1265
1135
  "values": []
1266
1136
  }
1267
1137
  ],
@@ -1318,32 +1188,6 @@
1318
1188
  ],
1319
1189
  "references": []
1320
1190
  },
1321
- {
1322
- "name": "flow-ui-radio",
1323
- "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.",
1324
- "attributes": [
1325
- {
1326
- "name": "value",
1327
- "description": "The radio's value. When selected, the radio group will receive this value.",
1328
- "values": []
1329
- },
1330
- {
1331
- "name": "size",
1332
- "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.",
1333
- "values": [
1334
- { "name": "small" },
1335
- { "name": "medium" },
1336
- { "name": "large" }
1337
- ]
1338
- },
1339
- {
1340
- "name": "disabled",
1341
- "description": "Disables the radio.",
1342
- "values": []
1343
- }
1344
- ],
1345
- "references": []
1346
- },
1347
1191
  {
1348
1192
  "name": "flow-ui-range",
1349
1193
  "description": "Ranges allow the user to select a single value within a given range using a slider.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when an alteration to the control's value is committed by the user.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the range.\n- **blur()** - Removes focus from the range.\n- **stepUp()** - Increments the value of the range by the value of the step attribute.\n- **stepDown()** - Decrements the value of the range by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--thumb-size** - The size of the thumb. _(default: undefined)_\n- **--tooltip-offset** - The vertical distance the tooltip is offset from the track. _(default: undefined)_\n- **--track-color-active** - The color of the portion of the track that represents the current value. _(default: undefined)_\n- **--track-color-inactive** - The of the portion of the track that represents the remaining value. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The point of origin of the active track. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The range's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` element.\n- **tooltip** - The range's tooltip.",
@@ -1418,102 +1262,6 @@
1418
1262
  ],
1419
1263
  "references": []
1420
1264
  },
1421
- {
1422
- "name": "flow-ui-select",
1423
- "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-ui-option>` elements. You can use `<flow-ui-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- **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, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix 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.",
1424
- "attributes": [
1425
- {
1426
- "name": "name",
1427
- "description": "The name of the select, submitted as a name/value pair with form data.",
1428
- "values": []
1429
- },
1430
- {
1431
- "name": "value",
1432
- "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.",
1433
- "values": [{ "name": "string[]" }]
1434
- },
1435
- {
1436
- "name": "size",
1437
- "description": "The select's size.",
1438
- "values": [
1439
- { "name": "small" },
1440
- { "name": "medium" },
1441
- { "name": "large" }
1442
- ]
1443
- },
1444
- {
1445
- "name": "placeholder",
1446
- "description": "Placeholder text to show as a hint when the select is empty.",
1447
- "values": []
1448
- },
1449
- {
1450
- "name": "multiple",
1451
- "description": "Allows more than one option to be selected.",
1452
- "values": []
1453
- },
1454
- {
1455
- "name": "max-options-visible",
1456
- "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
1457
- "values": []
1458
- },
1459
- {
1460
- "name": "disabled",
1461
- "description": "Disables the select control.",
1462
- "values": []
1463
- },
1464
- {
1465
- "name": "clearable",
1466
- "description": "Adds a clear button when the select is not empty.",
1467
- "values": []
1468
- },
1469
- {
1470
- "name": "open",
1471
- "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
1472
- "values": []
1473
- },
1474
- {
1475
- "name": "hoist",
1476
- "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.",
1477
- "values": []
1478
- },
1479
- {
1480
- "name": "filled",
1481
- "description": "Draws a filled select.",
1482
- "values": []
1483
- },
1484
- {
1485
- "name": "pill",
1486
- "description": "Draws a pill-style select with rounded edges.",
1487
- "values": []
1488
- },
1489
- {
1490
- "name": "label",
1491
- "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
1492
- "values": []
1493
- },
1494
- {
1495
- "name": "placement",
1496
- "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.",
1497
- "values": [{ "name": "top" }, { "name": "bottom" }]
1498
- },
1499
- {
1500
- "name": "help-text",
1501
- "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
1502
- "values": []
1503
- },
1504
- {
1505
- "name": "form",
1506
- "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.",
1507
- "values": []
1508
- },
1509
- {
1510
- "name": "required",
1511
- "description": "The select's required attribute.",
1512
- "values": []
1513
- }
1514
- ],
1515
- "references": []
1516
- },
1517
1265
  {
1518
1266
  "name": "flow-ui-spinner",
1519
1267
  "description": "Spinners are used to show the progress of an indeterminate operation.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -1628,28 +1376,6 @@
1628
1376
  ],
1629
1377
  "references": []
1630
1378
  },
1631
- {
1632
- "name": "flow-ui-tab-panel",
1633
- "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.",
1634
- "attributes": [
1635
- {
1636
- "name": "name",
1637
- "description": "The tab panel's name.",
1638
- "values": []
1639
- },
1640
- {
1641
- "name": "active",
1642
- "description": "When true, the tab panel will be shown.",
1643
- "values": []
1644
- },
1645
- {
1646
- "name": "scrollable",
1647
- "description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
1648
- "values": []
1649
- }
1650
- ],
1651
- "references": []
1652
- },
1653
1379
  {
1654
1380
  "name": "flow-ui-tab-group",
1655
1381
  "description": "Tab groups organize content into a container that shows one section at a time.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-tab-show** - Emitted when a tab is shown.\n- **flow-ui-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<flow-ui-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<flow-ui-tab>` elements.\n\n### **CSS Properties:**\n - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **tabs** - The container that wraps the tabs.\n- **active-tab-indicator** - The line that highlights the currently selected tab.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<flow-ui-icon-button>`.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
@@ -1683,38 +1409,22 @@
1683
1409
  "references": []
1684
1410
  },
1685
1411
  {
1686
- "name": "flow-ui-tag",
1687
- "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.",
1412
+ "name": "flow-ui-tab-panel",
1413
+ "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.",
1688
1414
  "attributes": [
1689
1415
  {
1690
- "name": "variant",
1691
- "description": "The tag's theme variant.",
1692
- "values": [
1693
- { "name": "primary" },
1694
- { "name": "success" },
1695
- { "name": "neutral" },
1696
- { "name": "warning" },
1697
- { "name": "danger" },
1698
- { "name": "text" }
1699
- ]
1700
- },
1701
- {
1702
- "name": "size",
1703
- "description": "The tag's size.",
1704
- "values": [
1705
- { "name": "small" },
1706
- { "name": "medium" },
1707
- { "name": "large" }
1708
- ]
1416
+ "name": "name",
1417
+ "description": "The tab panel's name.",
1418
+ "values": []
1709
1419
  },
1710
1420
  {
1711
- "name": "pill",
1712
- "description": "Draws a pill-style tag with rounded edges.",
1421
+ "name": "active",
1422
+ "description": "When true, the tab panel will be shown.",
1713
1423
  "values": []
1714
1424
  },
1715
1425
  {
1716
- "name": "removable",
1717
- "description": "Makes the tag removable and shows a remove button.",
1426
+ "name": "scrollable",
1427
+ "description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
1718
1428
  "values": []
1719
1429
  }
1720
1430
  ],