@emuanalytics/flow-rdf-ui 0.0.6 → 0.0.8

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.
@@ -4,235 +4,97 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "components/alert/alert.js",
7
+ "path": "components/badge/badge.js",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
11
  "description": "",
12
- "name": "FlowAlert",
12
+ "name": "FlowBadge",
13
13
  "cssParts": [
14
14
  {
15
15
  "description": "The component's base wrapper.",
16
16
  "name": "base"
17
- },
18
- {
19
- "description": "The container that wraps the optional icon.",
20
- "name": "icon"
21
- },
22
- {
23
- "description": "The container that wraps the alert's main content.",
24
- "name": "message"
25
- },
26
- {
27
- "description": "The close button, an `<flow-ui-icon-button>`.",
28
- "name": "close-button"
29
- },
30
- {
31
- "description": "The close button's exported `base` part.",
32
- "name": "close-button__base"
33
17
  }
34
18
  ],
35
19
  "slots": [
36
20
  {
37
- "description": "The alert's main content.",
21
+ "description": "The badge's content.",
38
22
  "name": ""
39
- },
40
- {
41
- "description": "An icon to show in the alert. Works best with `<flow-ui-icon>`.",
42
- "name": "icon"
43
23
  }
44
24
  ],
45
25
  "members": [
46
26
  {
47
27
  "kind": "field",
48
- "name": "autoHideTimeout",
28
+ "name": "variant",
49
29
  "type": {
50
- "text": "number"
30
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
51
31
  },
52
- "privacy": "private"
53
- },
54
- {
55
- "kind": "field",
56
- "name": "hasSlotController",
57
- "privacy": "private",
58
- "readonly": true,
59
- "default": "new HasSlotController(this, 'icon', 'suffix')"
60
- },
61
- {
62
- "kind": "field",
63
- "name": "localize",
64
- "privacy": "private",
65
- "readonly": true,
66
- "default": "new LocalizeController(this)"
67
- },
68
- {
69
- "kind": "field",
70
- "name": "base",
71
- "type": {
72
- "text": "HTMLElement"
73
- }
32
+ "default": "'primary'",
33
+ "description": "The badge's theme variant.",
34
+ "attribute": "variant",
35
+ "reflects": true
74
36
  },
75
37
  {
76
38
  "kind": "field",
77
- "name": "open",
39
+ "name": "pill",
78
40
  "type": {
79
41
  "text": "boolean"
80
42
  },
81
43
  "default": "false",
82
- "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
83
- "attribute": "open",
44
+ "description": "Draws a pill-style badge with rounded edges.",
45
+ "attribute": "pill",
84
46
  "reflects": true
85
47
  },
86
48
  {
87
49
  "kind": "field",
88
- "name": "closable",
50
+ "name": "pulse",
89
51
  "type": {
90
52
  "text": "boolean"
91
53
  },
92
54
  "default": "false",
93
- "description": "Enables a close button that allows the user to dismiss the alert.",
94
- "attribute": "closable",
55
+ "description": "Makes the badge pulsate to draw attention.",
56
+ "attribute": "pulse",
95
57
  "reflects": true
96
- },
58
+ }
59
+ ],
60
+ "attributes": [
97
61
  {
98
- "kind": "field",
99
62
  "name": "variant",
100
63
  "type": {
101
64
  "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
102
65
  },
103
66
  "default": "'primary'",
104
- "description": "The alert's theme variant.",
105
- "attribute": "variant",
106
- "reflects": true
107
- },
108
- {
109
- "kind": "field",
110
- "name": "duration",
111
- "default": "Infinity",
112
- "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
113
- "attribute": "duration"
114
- },
115
- {
116
- "kind": "method",
117
- "name": "restartAutoHide",
118
- "privacy": "private"
119
- },
120
- {
121
- "kind": "method",
122
- "name": "handleCloseClick",
123
- "privacy": "private"
124
- },
125
- {
126
- "kind": "method",
127
- "name": "handleMouseMove",
128
- "privacy": "private"
129
- },
130
- {
131
- "kind": "method",
132
- "name": "handleOpenChange"
133
- },
134
- {
135
- "kind": "method",
136
- "name": "handleDurationChange"
137
- },
138
- {
139
- "kind": "method",
140
- "name": "show",
141
- "description": "Shows the alert."
142
- },
143
- {
144
- "kind": "method",
145
- "name": "hide",
146
- "description": "Hides the alert"
147
- },
148
- {
149
- "kind": "method",
150
- "name": "toast",
151
- "description": "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."
152
- }
153
- ],
154
- "events": [
155
- {
156
- "description": "Emitted when the alert opens.",
157
- "name": "flow-ui-show",
158
- "reactName": "onFlowUiShow"
159
- },
160
- {
161
- "description": "Emitted after the alert opens and all animations are complete.",
162
- "name": "flow-ui-after-show",
163
- "reactName": "onFlowUiAfterShow"
164
- },
165
- {
166
- "description": "Emitted when the alert closes.",
167
- "name": "flow-ui-hide",
168
- "reactName": "onFlowUiHide"
67
+ "description": "The badge's theme variant.",
68
+ "fieldName": "variant"
169
69
  },
170
70
  {
171
- "description": "Emitted after the alert closes and all animations are complete.",
172
- "name": "flow-ui-after-hide",
173
- "reactName": "onFlowUiAfterHide"
174
- }
175
- ],
176
- "attributes": [
177
- {
178
- "name": "open",
71
+ "name": "pill",
179
72
  "type": {
180
73
  "text": "boolean"
181
74
  },
182
75
  "default": "false",
183
- "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
184
- "fieldName": "open"
76
+ "description": "Draws a pill-style badge with rounded edges.",
77
+ "fieldName": "pill"
185
78
  },
186
79
  {
187
- "name": "closable",
80
+ "name": "pulse",
188
81
  "type": {
189
82
  "text": "boolean"
190
83
  },
191
84
  "default": "false",
192
- "description": "Enables a close button that allows the user to dismiss the alert.",
193
- "fieldName": "closable"
194
- },
195
- {
196
- "name": "variant",
197
- "type": {
198
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
199
- },
200
- "default": "'primary'",
201
- "description": "The alert's theme variant.",
202
- "fieldName": "variant"
203
- },
204
- {
205
- "name": "duration",
206
- "default": "Infinity",
207
- "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
208
- "resolveInitializer": {
209
- "module": "src/components/alert/alert.ts"
210
- },
211
- "fieldName": "duration"
85
+ "description": "Makes the badge pulsate to draw attention.",
86
+ "fieldName": "pulse"
212
87
  }
213
88
  ],
214
89
  "superclass": {
215
90
  "name": "FlowRdfElement",
216
91
  "module": "/src/internal/flow-ui-rdf-element"
217
92
  },
218
- "summary": "Alerts are used to display important messages inline or as toast notifications.",
219
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/alert",
93
+ "summary": "Badges are used to draw attention and display statuses or counts.",
94
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/badge",
220
95
  "status": "stable",
221
96
  "since": "2.0",
222
- "dependencies": [
223
- "flow-ui-icon-button"
224
- ],
225
- "animations": [
226
- {
227
- "name": "alert.show",
228
- "description": "The animation to use when showing the alert."
229
- },
230
- {
231
- "name": "alert.hide",
232
- "description": "The animation to use when hiding the alert."
233
- }
234
- ],
235
- "tagName": "flow-ui-alert",
97
+ "tagName": "flow-ui-badge",
236
98
  "customElement": true
237
99
  }
238
100
  ],
@@ -241,77 +103,194 @@
241
103
  "kind": "js",
242
104
  "name": "default",
243
105
  "declaration": {
244
- "name": "FlowAlert",
245
- "module": "components/alert/alert.js"
106
+ "name": "FlowBadge",
107
+ "module": "components/badge/badge.js"
246
108
  }
247
109
  },
248
110
  {
249
111
  "kind": "custom-element-definition",
250
- "name": "flow-ui-alert",
112
+ "name": "flow-ui-badge",
251
113
  "declaration": {
252
- "name": "FlowAlert",
253
- "module": "components/alert/alert.js"
114
+ "name": "FlowBadge",
115
+ "module": "components/badge/badge.js"
254
116
  }
255
117
  }
256
118
  ]
257
119
  },
258
120
  {
259
121
  "kind": "javascript-module",
260
- "path": "components/animation/animation.js",
122
+ "path": "components/breadcrumb/breadcrumb.js",
261
123
  "declarations": [
262
124
  {
263
125
  "kind": "class",
264
126
  "description": "",
265
- "name": "FlowAnimation",
127
+ "name": "FlowBreadcrumb",
128
+ "cssParts": [
129
+ {
130
+ "description": "The component's base wrapper.",
131
+ "name": "base"
132
+ }
133
+ ],
266
134
  "slots": [
267
135
  {
268
- "description": "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.",
136
+ "description": "One or more breadcrumb items to display.",
269
137
  "name": ""
138
+ },
139
+ {
140
+ "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
141
+ "name": "separator"
270
142
  }
271
143
  ],
272
144
  "members": [
273
145
  {
274
146
  "kind": "field",
275
- "name": "animation",
276
- "type": {
277
- "text": "Animation | undefined"
278
- },
279
- "privacy": "private"
147
+ "name": "localize",
148
+ "privacy": "private",
149
+ "readonly": true,
150
+ "default": "new LocalizeController(this)"
280
151
  },
281
152
  {
282
153
  "kind": "field",
283
- "name": "hasStarted",
284
- "type": {
285
- "text": "boolean"
286
- },
287
- "privacy": "private",
288
- "default": "false"
154
+ "name": "separatorDir",
155
+ "privacy": "private"
289
156
  },
290
157
  {
291
158
  "kind": "field",
292
159
  "name": "defaultSlot",
293
160
  "type": {
294
- "text": "Promise<HTMLSlotElement>"
161
+ "text": "HTMLSlotElement"
295
162
  }
296
163
  },
297
164
  {
298
165
  "kind": "field",
299
- "name": "name",
166
+ "name": "separatorSlot",
300
167
  "type": {
301
- "text": "string"
302
- },
303
- "default": "'none'",
304
- "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
305
- "attribute": "name"
168
+ "text": "HTMLSlotElement"
169
+ }
306
170
  },
307
171
  {
308
172
  "kind": "field",
309
- "name": "play",
173
+ "name": "label",
310
174
  "type": {
311
- "text": "boolean"
175
+ "text": "string"
312
176
  },
313
- "default": "false",
314
- "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
177
+ "default": "''",
178
+ "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.",
179
+ "attribute": "label"
180
+ },
181
+ {
182
+ "kind": "method",
183
+ "name": "getSeparator",
184
+ "privacy": "private"
185
+ },
186
+ {
187
+ "kind": "method",
188
+ "name": "handleSlotChange",
189
+ "privacy": "private"
190
+ }
191
+ ],
192
+ "attributes": [
193
+ {
194
+ "name": "label",
195
+ "type": {
196
+ "text": "string"
197
+ },
198
+ "default": "''",
199
+ "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.",
200
+ "fieldName": "label"
201
+ }
202
+ ],
203
+ "superclass": {
204
+ "name": "FlowRdfElement",
205
+ "module": "/src/internal/flow-ui-rdf-element"
206
+ },
207
+ "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
208
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/breadcrumb",
209
+ "status": "stable",
210
+ "since": "2.0",
211
+ "dependencies": [
212
+ "flow-ui-icon"
213
+ ],
214
+ "tagName": "flow-ui-breadcrumb",
215
+ "customElement": true
216
+ }
217
+ ],
218
+ "exports": [
219
+ {
220
+ "kind": "js",
221
+ "name": "default",
222
+ "declaration": {
223
+ "name": "FlowBreadcrumb",
224
+ "module": "components/breadcrumb/breadcrumb.js"
225
+ }
226
+ },
227
+ {
228
+ "kind": "custom-element-definition",
229
+ "name": "flow-ui-breadcrumb",
230
+ "declaration": {
231
+ "name": "FlowBreadcrumb",
232
+ "module": "components/breadcrumb/breadcrumb.js"
233
+ }
234
+ }
235
+ ]
236
+ },
237
+ {
238
+ "kind": "javascript-module",
239
+ "path": "components/animation/animation.js",
240
+ "declarations": [
241
+ {
242
+ "kind": "class",
243
+ "description": "",
244
+ "name": "FlowAnimation",
245
+ "slots": [
246
+ {
247
+ "description": "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.",
248
+ "name": ""
249
+ }
250
+ ],
251
+ "members": [
252
+ {
253
+ "kind": "field",
254
+ "name": "animation",
255
+ "type": {
256
+ "text": "Animation | undefined"
257
+ },
258
+ "privacy": "private"
259
+ },
260
+ {
261
+ "kind": "field",
262
+ "name": "hasStarted",
263
+ "type": {
264
+ "text": "boolean"
265
+ },
266
+ "privacy": "private",
267
+ "default": "false"
268
+ },
269
+ {
270
+ "kind": "field",
271
+ "name": "defaultSlot",
272
+ "type": {
273
+ "text": "Promise<HTMLSlotElement>"
274
+ }
275
+ },
276
+ {
277
+ "kind": "field",
278
+ "name": "name",
279
+ "type": {
280
+ "text": "string"
281
+ },
282
+ "default": "'none'",
283
+ "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
284
+ "attribute": "name"
285
+ },
286
+ {
287
+ "kind": "field",
288
+ "name": "play",
289
+ "type": {
290
+ "text": "boolean"
291
+ },
292
+ "default": "false",
293
+ "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
315
294
  "attribute": "play",
316
295
  "reflects": true
317
296
  },
@@ -674,99 +653,167 @@
674
653
  },
675
654
  {
676
655
  "kind": "javascript-module",
677
- "path": "components/breadcrumb/breadcrumb.js",
656
+ "path": "components/avatar/avatar.js",
678
657
  "declarations": [
679
658
  {
680
659
  "kind": "class",
681
660
  "description": "",
682
- "name": "FlowBreadcrumb",
661
+ "name": "FlowAvatar",
662
+ "cssProperties": [
663
+ {
664
+ "description": "The size of the avatar.",
665
+ "name": "--size"
666
+ }
667
+ ],
683
668
  "cssParts": [
684
669
  {
685
670
  "description": "The component's base wrapper.",
686
671
  "name": "base"
672
+ },
673
+ {
674
+ "description": "The container that wraps the avatar's icon.",
675
+ "name": "icon"
676
+ },
677
+ {
678
+ "description": "The container that wraps the avatar's initials.",
679
+ "name": "initials"
680
+ },
681
+ {
682
+ "description": "The avatar image. Only shown when the `image` attribute is set.",
683
+ "name": "image"
687
684
  }
688
685
  ],
689
686
  "slots": [
690
687
  {
691
- "description": "One or more breadcrumb items to display.",
692
- "name": ""
693
- },
694
- {
695
- "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
696
- "name": "separator"
688
+ "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
689
+ "name": "icon"
697
690
  }
698
691
  ],
699
692
  "members": [
700
693
  {
701
694
  "kind": "field",
702
- "name": "localize",
695
+ "name": "hasError",
696
+ "type": {
697
+ "text": "boolean"
698
+ },
703
699
  "privacy": "private",
704
- "readonly": true,
705
- "default": "new LocalizeController(this)"
700
+ "default": "false"
706
701
  },
707
702
  {
708
703
  "kind": "field",
709
- "name": "separatorDir",
710
- "privacy": "private"
704
+ "name": "image",
705
+ "type": {
706
+ "text": "string"
707
+ },
708
+ "default": "''",
709
+ "description": "The image source to use for the avatar.",
710
+ "attribute": "image"
711
711
  },
712
712
  {
713
713
  "kind": "field",
714
- "name": "defaultSlot",
714
+ "name": "label",
715
715
  "type": {
716
- "text": "HTMLSlotElement"
717
- }
716
+ "text": "string"
717
+ },
718
+ "default": "''",
719
+ "description": "A label to use to describe the avatar to assistive devices.",
720
+ "attribute": "label"
718
721
  },
719
722
  {
720
723
  "kind": "field",
721
- "name": "separatorSlot",
724
+ "name": "initials",
722
725
  "type": {
723
- "text": "HTMLSlotElement"
724
- }
726
+ "text": "string"
727
+ },
728
+ "default": "''",
729
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
730
+ "attribute": "initials"
725
731
  },
726
732
  {
727
733
  "kind": "field",
728
- "name": "label",
734
+ "name": "loading",
729
735
  "type": {
730
- "text": "string"
736
+ "text": "'eager' | 'lazy'"
731
737
  },
732
- "default": "''",
733
- "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.",
734
- "attribute": "label"
738
+ "default": "'eager'",
739
+ "description": "Indicates how the browser should load the image.",
740
+ "attribute": "loading"
735
741
  },
736
742
  {
737
- "kind": "method",
738
- "name": "getSeparator",
739
- "privacy": "private"
743
+ "kind": "field",
744
+ "name": "shape",
745
+ "type": {
746
+ "text": "'circle' | 'square' | 'rounded'"
747
+ },
748
+ "default": "'circle'",
749
+ "description": "The shape of the avatar.",
750
+ "attribute": "shape",
751
+ "reflects": true
740
752
  },
741
753
  {
742
754
  "kind": "method",
743
- "name": "handleSlotChange",
744
- "privacy": "private"
755
+ "name": "handleImageChange"
745
756
  }
746
757
  ],
747
758
  "attributes": [
759
+ {
760
+ "name": "image",
761
+ "type": {
762
+ "text": "string"
763
+ },
764
+ "default": "''",
765
+ "description": "The image source to use for the avatar.",
766
+ "fieldName": "image"
767
+ },
748
768
  {
749
769
  "name": "label",
750
770
  "type": {
751
771
  "text": "string"
752
772
  },
753
773
  "default": "''",
754
- "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.",
774
+ "description": "A label to use to describe the avatar to assistive devices.",
755
775
  "fieldName": "label"
776
+ },
777
+ {
778
+ "name": "initials",
779
+ "type": {
780
+ "text": "string"
781
+ },
782
+ "default": "''",
783
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
784
+ "fieldName": "initials"
785
+ },
786
+ {
787
+ "name": "loading",
788
+ "type": {
789
+ "text": "'eager' | 'lazy'"
790
+ },
791
+ "default": "'eager'",
792
+ "description": "Indicates how the browser should load the image.",
793
+ "fieldName": "loading"
794
+ },
795
+ {
796
+ "name": "shape",
797
+ "type": {
798
+ "text": "'circle' | 'square' | 'rounded'"
799
+ },
800
+ "default": "'circle'",
801
+ "description": "The shape of the avatar.",
802
+ "fieldName": "shape"
756
803
  }
757
804
  ],
758
805
  "superclass": {
759
806
  "name": "FlowRdfElement",
760
807
  "module": "/src/internal/flow-ui-rdf-element"
761
808
  },
762
- "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
763
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/breadcrumb",
809
+ "summary": "Avatars are used to represent a person or object.",
810
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/avatar",
764
811
  "status": "stable",
765
812
  "since": "2.0",
766
813
  "dependencies": [
767
814
  "flow-ui-icon"
768
815
  ],
769
- "tagName": "flow-ui-breadcrumb",
816
+ "tagName": "flow-ui-avatar",
770
817
  "customElement": true
771
818
  }
772
819
  ],
@@ -775,141 +822,251 @@
775
822
  "kind": "js",
776
823
  "name": "default",
777
824
  "declaration": {
778
- "name": "FlowBreadcrumb",
779
- "module": "components/breadcrumb/breadcrumb.js"
825
+ "name": "FlowAvatar",
826
+ "module": "components/avatar/avatar.js"
780
827
  }
781
828
  },
782
829
  {
783
830
  "kind": "custom-element-definition",
784
- "name": "flow-ui-breadcrumb",
831
+ "name": "flow-ui-avatar",
785
832
  "declaration": {
786
- "name": "FlowBreadcrumb",
787
- "module": "components/breadcrumb/breadcrumb.js"
833
+ "name": "FlowAvatar",
834
+ "module": "components/avatar/avatar.js"
788
835
  }
789
836
  }
790
837
  ]
791
838
  },
792
839
  {
793
840
  "kind": "javascript-module",
794
- "path": "components/breadcrumb-item/breadcrumb-item.js",
841
+ "path": "components/alert/alert.js",
795
842
  "declarations": [
796
843
  {
797
844
  "kind": "class",
798
845
  "description": "",
799
- "name": "FlowBreadcrumbItem",
846
+ "name": "FlowAlert",
800
847
  "cssParts": [
801
848
  {
802
849
  "description": "The component's base wrapper.",
803
850
  "name": "base"
804
851
  },
805
852
  {
806
- "description": "The breadcrumb item's label.",
807
- "name": "label"
853
+ "description": "The container that wraps the optional icon.",
854
+ "name": "icon"
808
855
  },
809
856
  {
810
- "description": "The container that wraps the prefix.",
811
- "name": "prefix"
857
+ "description": "The container that wraps the alert's main content.",
858
+ "name": "message"
812
859
  },
813
860
  {
814
- "description": "The container that wraps the suffix.",
815
- "name": "suffix"
861
+ "description": "The close button, an `<flow-ui-icon-button>`.",
862
+ "name": "close-button"
816
863
  },
817
864
  {
818
- "description": "The container that wraps the separator.",
819
- "name": "separator"
865
+ "description": "The close button's exported `base` part.",
866
+ "name": "close-button__base"
820
867
  }
821
868
  ],
822
869
  "slots": [
823
870
  {
824
- "description": "The breadcrumb item's label.",
871
+ "description": "The alert's main content.",
825
872
  "name": ""
826
873
  },
827
874
  {
828
- "description": "An optional prefix, usually an icon or icon button.",
829
- "name": "prefix"
830
- },
831
- {
832
- "description": "An optional suffix, usually an icon or icon button.",
833
- "name": "suffix"
834
- },
835
- {
836
- "description": "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.",
837
- "name": "separator"
875
+ "description": "An icon to show in the alert. Works best with `<flow-ui-icon>`.",
876
+ "name": "icon"
838
877
  }
839
878
  ],
840
879
  "members": [
880
+ {
881
+ "kind": "field",
882
+ "name": "autoHideTimeout",
883
+ "type": {
884
+ "text": "number"
885
+ },
886
+ "privacy": "private"
887
+ },
841
888
  {
842
889
  "kind": "field",
843
890
  "name": "hasSlotController",
844
891
  "privacy": "private",
845
892
  "readonly": true,
846
- "default": "new HasSlotController(this, 'prefix', 'suffix')"
893
+ "default": "new HasSlotController(this, 'icon', 'suffix')"
847
894
  },
848
895
  {
849
896
  "kind": "field",
850
- "name": "href",
897
+ "name": "localize",
898
+ "privacy": "private",
899
+ "readonly": true,
900
+ "default": "new LocalizeController(this)"
901
+ },
902
+ {
903
+ "kind": "field",
904
+ "name": "base",
851
905
  "type": {
852
- "text": "string | undefined"
906
+ "text": "HTMLElement"
907
+ }
908
+ },
909
+ {
910
+ "kind": "field",
911
+ "name": "open",
912
+ "type": {
913
+ "text": "boolean"
853
914
  },
854
- "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
855
- "attribute": "href"
915
+ "default": "false",
916
+ "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
917
+ "attribute": "open",
918
+ "reflects": true
856
919
  },
857
920
  {
858
921
  "kind": "field",
859
- "name": "target",
922
+ "name": "closable",
860
923
  "type": {
861
- "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
924
+ "text": "boolean"
862
925
  },
863
- "description": "Tells the browser where to open the link. Only used when `href` is set.",
864
- "attribute": "target"
926
+ "default": "false",
927
+ "description": "Enables a close button that allows the user to dismiss the alert.",
928
+ "attribute": "closable",
929
+ "reflects": true
865
930
  },
866
931
  {
867
932
  "kind": "field",
868
- "name": "rel",
933
+ "name": "variant",
869
934
  "type": {
870
- "text": "string"
935
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
871
936
  },
872
- "default": "'noreferrer noopener'",
873
- "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
874
- "attribute": "rel"
937
+ "default": "'primary'",
938
+ "description": "The alert's theme variant.",
939
+ "attribute": "variant",
940
+ "reflects": true
941
+ },
942
+ {
943
+ "kind": "field",
944
+ "name": "duration",
945
+ "default": "Infinity",
946
+ "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
947
+ "attribute": "duration"
948
+ },
949
+ {
950
+ "kind": "method",
951
+ "name": "restartAutoHide",
952
+ "privacy": "private"
953
+ },
954
+ {
955
+ "kind": "method",
956
+ "name": "handleCloseClick",
957
+ "privacy": "private"
958
+ },
959
+ {
960
+ "kind": "method",
961
+ "name": "handleMouseMove",
962
+ "privacy": "private"
963
+ },
964
+ {
965
+ "kind": "method",
966
+ "name": "handleOpenChange"
967
+ },
968
+ {
969
+ "kind": "method",
970
+ "name": "handleDurationChange"
971
+ },
972
+ {
973
+ "kind": "method",
974
+ "name": "show",
975
+ "description": "Shows the alert."
976
+ },
977
+ {
978
+ "kind": "method",
979
+ "name": "hide",
980
+ "description": "Hides the alert"
981
+ },
982
+ {
983
+ "kind": "method",
984
+ "name": "toast",
985
+ "description": "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."
986
+ }
987
+ ],
988
+ "events": [
989
+ {
990
+ "description": "Emitted when the alert opens.",
991
+ "name": "flow-ui-show",
992
+ "reactName": "onFlowUiShow"
993
+ },
994
+ {
995
+ "description": "Emitted after the alert opens and all animations are complete.",
996
+ "name": "flow-ui-after-show",
997
+ "reactName": "onFlowUiAfterShow"
998
+ },
999
+ {
1000
+ "description": "Emitted when the alert closes.",
1001
+ "name": "flow-ui-hide",
1002
+ "reactName": "onFlowUiHide"
1003
+ },
1004
+ {
1005
+ "description": "Emitted after the alert closes and all animations are complete.",
1006
+ "name": "flow-ui-after-hide",
1007
+ "reactName": "onFlowUiAfterHide"
875
1008
  }
876
1009
  ],
877
1010
  "attributes": [
878
1011
  {
879
- "name": "href",
1012
+ "name": "open",
880
1013
  "type": {
881
- "text": "string | undefined"
1014
+ "text": "boolean"
882
1015
  },
883
- "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
884
- "fieldName": "href"
1016
+ "default": "false",
1017
+ "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
1018
+ "fieldName": "open"
885
1019
  },
886
1020
  {
887
- "name": "target",
1021
+ "name": "closable",
888
1022
  "type": {
889
- "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
1023
+ "text": "boolean"
890
1024
  },
891
- "description": "Tells the browser where to open the link. Only used when `href` is set.",
892
- "fieldName": "target"
1025
+ "default": "false",
1026
+ "description": "Enables a close button that allows the user to dismiss the alert.",
1027
+ "fieldName": "closable"
893
1028
  },
894
1029
  {
895
- "name": "rel",
1030
+ "name": "variant",
896
1031
  "type": {
897
- "text": "string"
1032
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
898
1033
  },
899
- "default": "'noreferrer noopener'",
900
- "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
901
- "fieldName": "rel"
1034
+ "default": "'primary'",
1035
+ "description": "The alert's theme variant.",
1036
+ "fieldName": "variant"
1037
+ },
1038
+ {
1039
+ "name": "duration",
1040
+ "default": "Infinity",
1041
+ "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
1042
+ "resolveInitializer": {
1043
+ "module": "src/components/alert/alert.ts"
1044
+ },
1045
+ "fieldName": "duration"
902
1046
  }
903
1047
  ],
904
1048
  "superclass": {
905
1049
  "name": "FlowRdfElement",
906
1050
  "module": "/src/internal/flow-ui-rdf-element"
907
1051
  },
908
- "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
909
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/breadcrumb-item",
1052
+ "summary": "Alerts are used to display important messages inline or as toast notifications.",
1053
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/alert",
910
1054
  "status": "stable",
911
1055
  "since": "2.0",
912
- "tagName": "flow-ui-breadcrumb-item",
1056
+ "dependencies": [
1057
+ "flow-ui-icon-button"
1058
+ ],
1059
+ "animations": [
1060
+ {
1061
+ "name": "alert.show",
1062
+ "description": "The animation to use when showing the alert."
1063
+ },
1064
+ {
1065
+ "name": "alert.hide",
1066
+ "description": "The animation to use when hiding the alert."
1067
+ }
1068
+ ],
1069
+ "tagName": "flow-ui-alert",
913
1070
  "customElement": true
914
1071
  }
915
1072
  ],
@@ -918,166 +1075,141 @@
918
1075
  "kind": "js",
919
1076
  "name": "default",
920
1077
  "declaration": {
921
- "name": "FlowBreadcrumbItem",
922
- "module": "components/breadcrumb-item/breadcrumb-item.js"
1078
+ "name": "FlowAlert",
1079
+ "module": "components/alert/alert.js"
923
1080
  }
924
1081
  },
925
1082
  {
926
1083
  "kind": "custom-element-definition",
927
- "name": "flow-ui-breadcrumb-item",
1084
+ "name": "flow-ui-alert",
928
1085
  "declaration": {
929
- "name": "FlowBreadcrumbItem",
930
- "module": "components/breadcrumb-item/breadcrumb-item.js"
1086
+ "name": "FlowAlert",
1087
+ "module": "components/alert/alert.js"
931
1088
  }
932
1089
  }
933
1090
  ]
934
1091
  },
935
1092
  {
936
1093
  "kind": "javascript-module",
937
- "path": "components/button-group/button-group.js",
1094
+ "path": "components/breadcrumb-item/breadcrumb-item.js",
938
1095
  "declarations": [
939
1096
  {
940
1097
  "kind": "class",
941
1098
  "description": "",
942
- "name": "FlowButtonGroup",
1099
+ "name": "FlowBreadcrumbItem",
943
1100
  "cssParts": [
944
1101
  {
945
1102
  "description": "The component's base wrapper.",
946
1103
  "name": "base"
1104
+ },
1105
+ {
1106
+ "description": "The breadcrumb item's label.",
1107
+ "name": "label"
1108
+ },
1109
+ {
1110
+ "description": "The container that wraps the prefix.",
1111
+ "name": "prefix"
1112
+ },
1113
+ {
1114
+ "description": "The container that wraps the suffix.",
1115
+ "name": "suffix"
1116
+ },
1117
+ {
1118
+ "description": "The container that wraps the separator.",
1119
+ "name": "separator"
947
1120
  }
948
1121
  ],
949
1122
  "slots": [
950
1123
  {
951
- "description": "One or more `<flow-ui-button>` elements to display in the button group.",
1124
+ "description": "The breadcrumb item's label.",
952
1125
  "name": ""
953
- }
954
- ],
955
- "members": [
1126
+ },
956
1127
  {
957
- "kind": "field",
958
- "name": "defaultSlot",
959
- "type": {
960
- "text": "HTMLSlotElement"
961
- }
1128
+ "description": "An optional prefix, usually an icon or icon button.",
1129
+ "name": "prefix"
1130
+ },
1131
+ {
1132
+ "description": "An optional suffix, usually an icon or icon button.",
1133
+ "name": "suffix"
962
1134
  },
1135
+ {
1136
+ "description": "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.",
1137
+ "name": "separator"
1138
+ }
1139
+ ],
1140
+ "members": [
963
1141
  {
964
1142
  "kind": "field",
965
- "name": "disableRole",
966
- "type": {
967
- "text": "boolean"
968
- },
969
- "default": "false"
1143
+ "name": "hasSlotController",
1144
+ "privacy": "private",
1145
+ "readonly": true,
1146
+ "default": "new HasSlotController(this, 'prefix', 'suffix')"
970
1147
  },
971
1148
  {
972
1149
  "kind": "field",
973
- "name": "label",
1150
+ "name": "href",
974
1151
  "type": {
975
- "text": "string"
1152
+ "text": "string | undefined"
976
1153
  },
977
- "default": "''",
978
- "attribute": "label"
1154
+ "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
1155
+ "attribute": "href"
979
1156
  },
980
1157
  {
981
1158
  "kind": "field",
982
- "name": "vertical",
1159
+ "name": "target",
983
1160
  "type": {
984
- "text": "boolean"
1161
+ "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
985
1162
  },
986
- "default": "false",
987
- "description": "Use vertical layout for the button group.",
988
- "attribute": "vertical",
989
- "reflects": true
990
- },
991
- {
992
- "kind": "method",
993
- "name": "handleVerticalChange"
994
- },
995
- {
996
- "kind": "method",
997
- "name": "handleFocus",
998
- "privacy": "private",
999
- "parameters": [
1000
- {
1001
- "name": "event",
1002
- "type": {
1003
- "text": "Event"
1004
- }
1005
- }
1006
- ]
1007
- },
1008
- {
1009
- "kind": "method",
1010
- "name": "handleBlur",
1011
- "privacy": "private",
1012
- "parameters": [
1013
- {
1014
- "name": "event",
1015
- "type": {
1016
- "text": "Event"
1017
- }
1018
- }
1019
- ]
1020
- },
1021
- {
1022
- "kind": "method",
1023
- "name": "handleMouseOver",
1024
- "privacy": "private",
1025
- "parameters": [
1026
- {
1027
- "name": "event",
1028
- "type": {
1029
- "text": "Event"
1030
- }
1031
- }
1032
- ]
1033
- },
1034
- {
1035
- "kind": "method",
1036
- "name": "handleMouseOut",
1037
- "privacy": "private",
1038
- "parameters": [
1039
- {
1040
- "name": "event",
1041
- "type": {
1042
- "text": "Event"
1043
- }
1044
- }
1045
- ]
1163
+ "description": "Tells the browser where to open the link. Only used when `href` is set.",
1164
+ "attribute": "target"
1046
1165
  },
1047
1166
  {
1048
- "kind": "method",
1049
- "name": "handleSlotChange",
1050
- "privacy": "private"
1167
+ "kind": "field",
1168
+ "name": "rel",
1169
+ "type": {
1170
+ "text": "string"
1171
+ },
1172
+ "default": "'noreferrer noopener'",
1173
+ "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
1174
+ "attribute": "rel"
1051
1175
  }
1052
1176
  ],
1053
1177
  "attributes": [
1054
1178
  {
1055
- "name": "label",
1179
+ "name": "href",
1056
1180
  "type": {
1057
- "text": "string"
1181
+ "text": "string | undefined"
1058
1182
  },
1059
- "default": "''",
1060
- "fieldName": "label"
1183
+ "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
1184
+ "fieldName": "href"
1061
1185
  },
1062
1186
  {
1063
- "name": "vertical",
1187
+ "name": "target",
1064
1188
  "type": {
1065
- "text": "boolean"
1189
+ "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
1066
1190
  },
1067
- "default": "false",
1068
- "description": "Use vertical layout for the button group.",
1069
- "fieldName": "vertical"
1191
+ "description": "Tells the browser where to open the link. Only used when `href` is set.",
1192
+ "fieldName": "target"
1193
+ },
1194
+ {
1195
+ "name": "rel",
1196
+ "type": {
1197
+ "text": "string"
1198
+ },
1199
+ "default": "'noreferrer noopener'",
1200
+ "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
1201
+ "fieldName": "rel"
1070
1202
  }
1071
1203
  ],
1072
1204
  "superclass": {
1073
1205
  "name": "FlowRdfElement",
1074
1206
  "module": "/src/internal/flow-ui-rdf-element"
1075
1207
  },
1076
- "summary": "Button groups can be used to group related buttons into sections.",
1077
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button-group",
1208
+ "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
1209
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/breadcrumb-item",
1078
1210
  "status": "stable",
1079
1211
  "since": "2.0",
1080
- "tagName": "flow-ui-button-group",
1212
+ "tagName": "flow-ui-breadcrumb-item",
1081
1213
  "customElement": true
1082
1214
  }
1083
1215
  ],
@@ -1086,16 +1218,16 @@
1086
1218
  "kind": "js",
1087
1219
  "name": "default",
1088
1220
  "declaration": {
1089
- "name": "FlowButtonGroup",
1090
- "module": "components/button-group/button-group.js"
1221
+ "name": "FlowBreadcrumbItem",
1222
+ "module": "components/breadcrumb-item/breadcrumb-item.js"
1091
1223
  }
1092
1224
  },
1093
1225
  {
1094
1226
  "kind": "custom-element-definition",
1095
- "name": "flow-ui-button-group",
1227
+ "name": "flow-ui-breadcrumb-item",
1096
1228
  "declaration": {
1097
- "name": "FlowButtonGroup",
1098
- "module": "components/button-group/button-group.js"
1229
+ "name": "FlowBreadcrumbItem",
1230
+ "module": "components/breadcrumb-item/breadcrumb-item.js"
1099
1231
  }
1100
1232
  }
1101
1233
  ]
@@ -1779,97 +1911,88 @@
1779
1911
  },
1780
1912
  {
1781
1913
  "kind": "javascript-module",
1782
- "path": "components/badge/badge.js",
1914
+ "path": "components/card/card.js",
1783
1915
  "declarations": [
1784
1916
  {
1785
1917
  "kind": "class",
1786
1918
  "description": "",
1787
- "name": "FlowBadge",
1919
+ "name": "FlowCard",
1920
+ "cssProperties": [
1921
+ {
1922
+ "description": "The card's border color, including borders that occur inside the card.",
1923
+ "name": "--border-color"
1924
+ },
1925
+ {
1926
+ "description": "The border radius for the card's edges.",
1927
+ "name": "--border-radius"
1928
+ },
1929
+ {
1930
+ "description": "The width of the card's borders.",
1931
+ "name": "--border-width"
1932
+ },
1933
+ {
1934
+ "description": "The padding to use for the card's sections.",
1935
+ "name": "--padding"
1936
+ }
1937
+ ],
1788
1938
  "cssParts": [
1789
1939
  {
1790
1940
  "description": "The component's base wrapper.",
1791
1941
  "name": "base"
1792
- }
1793
- ],
1794
- "slots": [
1942
+ },
1795
1943
  {
1796
- "description": "The badge's content.",
1797
- "name": ""
1798
- }
1799
- ],
1800
- "members": [
1944
+ "description": "The container that wraps the card's image.",
1945
+ "name": "image"
1946
+ },
1801
1947
  {
1802
- "kind": "field",
1803
- "name": "variant",
1804
- "type": {
1805
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
1806
- },
1807
- "default": "'primary'",
1808
- "description": "The badge's theme variant.",
1809
- "attribute": "variant",
1810
- "reflects": true
1948
+ "description": "The container that wraps the card's header.",
1949
+ "name": "header"
1811
1950
  },
1812
1951
  {
1813
- "kind": "field",
1814
- "name": "pill",
1815
- "type": {
1816
- "text": "boolean"
1817
- },
1818
- "default": "false",
1819
- "description": "Draws a pill-style badge with rounded edges.",
1820
- "attribute": "pill",
1821
- "reflects": true
1952
+ "description": "The container that wraps the card's main content.",
1953
+ "name": "body"
1822
1954
  },
1823
1955
  {
1824
- "kind": "field",
1825
- "name": "pulse",
1826
- "type": {
1827
- "text": "boolean"
1828
- },
1829
- "default": "false",
1830
- "description": "Makes the badge pulsate to draw attention.",
1831
- "attribute": "pulse",
1832
- "reflects": true
1956
+ "description": "The container that wraps the card's footer.",
1957
+ "name": "footer"
1833
1958
  }
1834
1959
  ],
1835
- "attributes": [
1960
+ "slots": [
1836
1961
  {
1837
- "name": "variant",
1838
- "type": {
1839
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
1840
- },
1841
- "default": "'primary'",
1842
- "description": "The badge's theme variant.",
1843
- "fieldName": "variant"
1962
+ "description": "The card's main content.",
1963
+ "name": ""
1844
1964
  },
1845
1965
  {
1846
- "name": "pill",
1847
- "type": {
1848
- "text": "boolean"
1849
- },
1850
- "default": "false",
1851
- "description": "Draws a pill-style badge with rounded edges.",
1852
- "fieldName": "pill"
1966
+ "description": "An optional header for the card.",
1967
+ "name": "header"
1853
1968
  },
1854
1969
  {
1855
- "name": "pulse",
1856
- "type": {
1857
- "text": "boolean"
1858
- },
1859
- "default": "false",
1860
- "description": "Makes the badge pulsate to draw attention.",
1861
- "fieldName": "pulse"
1970
+ "description": "An optional footer for the card.",
1971
+ "name": "footer"
1972
+ },
1973
+ {
1974
+ "description": "An optional image to render at the start of the card.",
1975
+ "name": "image"
1862
1976
  }
1863
1977
  ],
1864
- "superclass": {
1865
- "name": "FlowRdfElement",
1866
- "module": "/src/internal/flow-ui-rdf-element"
1867
- },
1868
- "summary": "Badges are used to draw attention and display statuses or counts.",
1869
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/badge",
1978
+ "members": [
1979
+ {
1980
+ "kind": "field",
1981
+ "name": "hasSlotController",
1982
+ "privacy": "private",
1983
+ "readonly": true,
1984
+ "default": "new HasSlotController(this, 'footer', 'header', 'image')"
1985
+ }
1986
+ ],
1987
+ "superclass": {
1988
+ "name": "FlowRdfElement",
1989
+ "module": "/src/internal/flow-ui-rdf-element"
1990
+ },
1991
+ "summary": "Cards can be used to group related subjects in a container.",
1992
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/card",
1870
1993
  "status": "stable",
1871
1994
  "since": "2.0",
1872
- "tagName": "flow-ui-badge",
1995
+ "tagName": "flow-ui-card",
1873
1996
  "customElement": true
1874
1997
  }
1875
1998
  ],
@@ -1878,77 +2001,55 @@
1878
2001
  "kind": "js",
1879
2002
  "name": "default",
1880
2003
  "declaration": {
1881
- "name": "FlowBadge",
1882
- "module": "components/badge/badge.js"
2004
+ "name": "FlowCard",
2005
+ "module": "components/card/card.js"
1883
2006
  }
1884
2007
  },
1885
2008
  {
1886
2009
  "kind": "custom-element-definition",
1887
- "name": "flow-ui-badge",
2010
+ "name": "flow-ui-card",
1888
2011
  "declaration": {
1889
- "name": "FlowBadge",
1890
- "module": "components/badge/badge.js"
2012
+ "name": "FlowCard",
2013
+ "module": "components/card/card.js"
1891
2014
  }
1892
2015
  }
1893
2016
  ]
1894
2017
  },
1895
2018
  {
1896
2019
  "kind": "javascript-module",
1897
- "path": "components/avatar/avatar.js",
2020
+ "path": "components/button-group/button-group.js",
1898
2021
  "declarations": [
1899
2022
  {
1900
2023
  "kind": "class",
1901
2024
  "description": "",
1902
- "name": "FlowAvatar",
1903
- "cssProperties": [
1904
- {
1905
- "description": "The size of the avatar.",
1906
- "name": "--size"
1907
- }
1908
- ],
2025
+ "name": "FlowButtonGroup",
1909
2026
  "cssParts": [
1910
2027
  {
1911
2028
  "description": "The component's base wrapper.",
1912
2029
  "name": "base"
1913
- },
1914
- {
1915
- "description": "The container that wraps the avatar's icon.",
1916
- "name": "icon"
1917
- },
1918
- {
1919
- "description": "The container that wraps the avatar's initials.",
1920
- "name": "initials"
1921
- },
1922
- {
1923
- "description": "The avatar image. Only shown when the `image` attribute is set.",
1924
- "name": "image"
1925
2030
  }
1926
2031
  ],
1927
2032
  "slots": [
1928
2033
  {
1929
- "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
1930
- "name": "icon"
2034
+ "description": "One or more `<flow-ui-button>` elements to display in the button group.",
2035
+ "name": ""
1931
2036
  }
1932
2037
  ],
1933
2038
  "members": [
1934
2039
  {
1935
2040
  "kind": "field",
1936
- "name": "hasError",
2041
+ "name": "defaultSlot",
1937
2042
  "type": {
1938
- "text": "boolean"
1939
- },
1940
- "privacy": "private",
1941
- "default": "false"
2043
+ "text": "HTMLSlotElement"
2044
+ }
1942
2045
  },
1943
2046
  {
1944
2047
  "kind": "field",
1945
- "name": "image",
2048
+ "name": "disableRole",
1946
2049
  "type": {
1947
- "text": "string"
2050
+ "text": "boolean"
1948
2051
  },
1949
- "default": "''",
1950
- "description": "The image source to use for the avatar.",
1951
- "attribute": "image"
2052
+ "default": "false"
1952
2053
  },
1953
2054
  {
1954
2055
  "kind": "field",
@@ -1957,104 +2058,109 @@
1957
2058
  "text": "string"
1958
2059
  },
1959
2060
  "default": "''",
1960
- "description": "A label to use to describe the avatar to assistive devices.",
1961
2061
  "attribute": "label"
1962
2062
  },
1963
2063
  {
1964
2064
  "kind": "field",
1965
- "name": "initials",
2065
+ "name": "vertical",
1966
2066
  "type": {
1967
- "text": "string"
2067
+ "text": "boolean"
1968
2068
  },
1969
- "default": "''",
1970
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
1971
- "attribute": "initials"
2069
+ "default": "false",
2070
+ "description": "Use vertical layout for the button group.",
2071
+ "attribute": "vertical",
2072
+ "reflects": true
1972
2073
  },
1973
2074
  {
1974
- "kind": "field",
1975
- "name": "loading",
1976
- "type": {
1977
- "text": "'eager' | 'lazy'"
1978
- },
1979
- "default": "'eager'",
1980
- "description": "Indicates how the browser should load the image.",
1981
- "attribute": "loading"
2075
+ "kind": "method",
2076
+ "name": "handleVerticalChange"
1982
2077
  },
1983
2078
  {
1984
- "kind": "field",
1985
- "name": "shape",
1986
- "type": {
1987
- "text": "'circle' | 'square' | 'rounded'"
1988
- },
1989
- "default": "'circle'",
1990
- "description": "The shape of the avatar.",
1991
- "attribute": "shape",
1992
- "reflects": true
2079
+ "kind": "method",
2080
+ "name": "handleFocus",
2081
+ "privacy": "private",
2082
+ "parameters": [
2083
+ {
2084
+ "name": "event",
2085
+ "type": {
2086
+ "text": "Event"
2087
+ }
2088
+ }
2089
+ ]
1993
2090
  },
1994
2091
  {
1995
2092
  "kind": "method",
1996
- "name": "handleImageChange"
2093
+ "name": "handleBlur",
2094
+ "privacy": "private",
2095
+ "parameters": [
2096
+ {
2097
+ "name": "event",
2098
+ "type": {
2099
+ "text": "Event"
2100
+ }
2101
+ }
2102
+ ]
2103
+ },
2104
+ {
2105
+ "kind": "method",
2106
+ "name": "handleMouseOver",
2107
+ "privacy": "private",
2108
+ "parameters": [
2109
+ {
2110
+ "name": "event",
2111
+ "type": {
2112
+ "text": "Event"
2113
+ }
2114
+ }
2115
+ ]
2116
+ },
2117
+ {
2118
+ "kind": "method",
2119
+ "name": "handleMouseOut",
2120
+ "privacy": "private",
2121
+ "parameters": [
2122
+ {
2123
+ "name": "event",
2124
+ "type": {
2125
+ "text": "Event"
2126
+ }
2127
+ }
2128
+ ]
2129
+ },
2130
+ {
2131
+ "kind": "method",
2132
+ "name": "handleSlotChange",
2133
+ "privacy": "private"
1997
2134
  }
1998
2135
  ],
1999
2136
  "attributes": [
2000
- {
2001
- "name": "image",
2002
- "type": {
2003
- "text": "string"
2004
- },
2005
- "default": "''",
2006
- "description": "The image source to use for the avatar.",
2007
- "fieldName": "image"
2008
- },
2009
2137
  {
2010
2138
  "name": "label",
2011
2139
  "type": {
2012
2140
  "text": "string"
2013
2141
  },
2014
2142
  "default": "''",
2015
- "description": "A label to use to describe the avatar to assistive devices.",
2016
2143
  "fieldName": "label"
2017
2144
  },
2018
2145
  {
2019
- "name": "initials",
2020
- "type": {
2021
- "text": "string"
2022
- },
2023
- "default": "''",
2024
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
2025
- "fieldName": "initials"
2026
- },
2027
- {
2028
- "name": "loading",
2029
- "type": {
2030
- "text": "'eager' | 'lazy'"
2031
- },
2032
- "default": "'eager'",
2033
- "description": "Indicates how the browser should load the image.",
2034
- "fieldName": "loading"
2035
- },
2036
- {
2037
- "name": "shape",
2146
+ "name": "vertical",
2038
2147
  "type": {
2039
- "text": "'circle' | 'square' | 'rounded'"
2148
+ "text": "boolean"
2040
2149
  },
2041
- "default": "'circle'",
2042
- "description": "The shape of the avatar.",
2043
- "fieldName": "shape"
2150
+ "default": "false",
2151
+ "description": "Use vertical layout for the button group.",
2152
+ "fieldName": "vertical"
2044
2153
  }
2045
2154
  ],
2046
2155
  "superclass": {
2047
2156
  "name": "FlowRdfElement",
2048
2157
  "module": "/src/internal/flow-ui-rdf-element"
2049
2158
  },
2050
- "summary": "Avatars are used to represent a person or object.",
2051
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/avatar",
2159
+ "summary": "Button groups can be used to group related buttons into sections.",
2160
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button-group",
2052
2161
  "status": "stable",
2053
2162
  "since": "2.0",
2054
- "dependencies": [
2055
- "flow-ui-icon"
2056
- ],
2057
- "tagName": "flow-ui-avatar",
2163
+ "tagName": "flow-ui-button-group",
2058
2164
  "customElement": true
2059
2165
  }
2060
2166
  ],
@@ -2063,161 +2169,55 @@
2063
2169
  "kind": "js",
2064
2170
  "name": "default",
2065
2171
  "declaration": {
2066
- "name": "FlowAvatar",
2067
- "module": "components/avatar/avatar.js"
2172
+ "name": "FlowButtonGroup",
2173
+ "module": "components/button-group/button-group.js"
2068
2174
  }
2069
2175
  },
2070
2176
  {
2071
2177
  "kind": "custom-element-definition",
2072
- "name": "flow-ui-avatar",
2178
+ "name": "flow-ui-button-group",
2073
2179
  "declaration": {
2074
- "name": "FlowAvatar",
2075
- "module": "components/avatar/avatar.js"
2180
+ "name": "FlowButtonGroup",
2181
+ "module": "components/button-group/button-group.js"
2076
2182
  }
2077
2183
  }
2078
2184
  ]
2079
2185
  },
2080
2186
  {
2081
2187
  "kind": "javascript-module",
2082
- "path": "components/card/card.js",
2188
+ "path": "components/carousel/autoplay-controller.js",
2083
2189
  "declarations": [
2084
2190
  {
2085
2191
  "kind": "class",
2086
- "description": "",
2087
- "name": "FlowCard",
2088
- "cssProperties": [
2089
- {
2090
- "description": "The card's border color, including borders that occur inside the card.",
2091
- "name": "--border-color"
2092
- },
2192
+ "description": "A controller that repeatedly calls the specified callback with the provided interval time.\nThe timer is automatically paused while the user is interacting with the component.",
2193
+ "name": "AutoplayController",
2194
+ "members": [
2093
2195
  {
2094
- "description": "The border radius for the card's edges.",
2095
- "name": "--border-radius"
2196
+ "kind": "field",
2197
+ "name": "host",
2198
+ "type": {
2199
+ "text": "ReactiveElement"
2200
+ },
2201
+ "privacy": "private",
2202
+ "default": "host"
2096
2203
  },
2097
2204
  {
2098
- "description": "The width of the card's borders.",
2099
- "name": "--border-width"
2205
+ "kind": "field",
2206
+ "name": "timerId",
2207
+ "type": {
2208
+ "text": "number"
2209
+ },
2210
+ "privacy": "private",
2211
+ "default": "0"
2100
2212
  },
2101
2213
  {
2102
- "description": "The padding to use for the card's sections.",
2103
- "name": "--padding"
2104
- }
2105
- ],
2106
- "cssParts": [
2107
- {
2108
- "description": "The component's base wrapper.",
2109
- "name": "base"
2110
- },
2111
- {
2112
- "description": "The container that wraps the card's image.",
2113
- "name": "image"
2114
- },
2115
- {
2116
- "description": "The container that wraps the card's header.",
2117
- "name": "header"
2118
- },
2119
- {
2120
- "description": "The container that wraps the card's main content.",
2121
- "name": "body"
2122
- },
2123
- {
2124
- "description": "The container that wraps the card's footer.",
2125
- "name": "footer"
2126
- }
2127
- ],
2128
- "slots": [
2129
- {
2130
- "description": "The card's main content.",
2131
- "name": ""
2132
- },
2133
- {
2134
- "description": "An optional header for the card.",
2135
- "name": "header"
2136
- },
2137
- {
2138
- "description": "An optional footer for the card.",
2139
- "name": "footer"
2140
- },
2141
- {
2142
- "description": "An optional image to render at the start of the card.",
2143
- "name": "image"
2144
- }
2145
- ],
2146
- "members": [
2147
- {
2148
- "kind": "field",
2149
- "name": "hasSlotController",
2150
- "privacy": "private",
2151
- "readonly": true,
2152
- "default": "new HasSlotController(this, 'footer', 'header', 'image')"
2153
- }
2154
- ],
2155
- "superclass": {
2156
- "name": "FlowRdfElement",
2157
- "module": "/src/internal/flow-ui-rdf-element"
2158
- },
2159
- "summary": "Cards can be used to group related subjects in a container.",
2160
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/card",
2161
- "status": "stable",
2162
- "since": "2.0",
2163
- "tagName": "flow-ui-card",
2164
- "customElement": true
2165
- }
2166
- ],
2167
- "exports": [
2168
- {
2169
- "kind": "js",
2170
- "name": "default",
2171
- "declaration": {
2172
- "name": "FlowCard",
2173
- "module": "components/card/card.js"
2174
- }
2175
- },
2176
- {
2177
- "kind": "custom-element-definition",
2178
- "name": "flow-ui-card",
2179
- "declaration": {
2180
- "name": "FlowCard",
2181
- "module": "components/card/card.js"
2182
- }
2183
- }
2184
- ]
2185
- },
2186
- {
2187
- "kind": "javascript-module",
2188
- "path": "components/carousel/autoplay-controller.js",
2189
- "declarations": [
2190
- {
2191
- "kind": "class",
2192
- "description": "A controller that repeatedly calls the specified callback with the provided interval time.\nThe timer is automatically paused while the user is interacting with the component.",
2193
- "name": "AutoplayController",
2194
- "members": [
2195
- {
2196
- "kind": "field",
2197
- "name": "host",
2198
- "type": {
2199
- "text": "ReactiveElement"
2200
- },
2201
- "privacy": "private",
2202
- "default": "host"
2203
- },
2204
- {
2205
- "kind": "field",
2206
- "name": "timerId",
2207
- "type": {
2208
- "text": "number"
2209
- },
2210
- "privacy": "private",
2211
- "default": "0"
2212
- },
2213
- {
2214
- "kind": "field",
2215
- "name": "tickCallback",
2216
- "type": {
2217
- "text": "() => void"
2218
- },
2219
- "privacy": "private",
2220
- "default": "tickCallback"
2214
+ "kind": "field",
2215
+ "name": "tickCallback",
2216
+ "type": {
2217
+ "text": "() => void"
2218
+ },
2219
+ "privacy": "private",
2220
+ "default": "tickCallback"
2221
2221
  },
2222
2222
  {
2223
2223
  "kind": "field",
@@ -8474,127 +8474,6 @@
8474
8474
  }
8475
8475
  ]
8476
8476
  },
8477
- {
8478
- "kind": "javascript-module",
8479
- "path": "components/menu/menu.js",
8480
- "declarations": [
8481
- {
8482
- "kind": "class",
8483
- "description": "",
8484
- "name": "FlowMenu",
8485
- "slots": [
8486
- {
8487
- "description": "The menu's content, including menu items, menu labels, and dividers.",
8488
- "name": ""
8489
- }
8490
- ],
8491
- "members": [
8492
- {
8493
- "kind": "field",
8494
- "name": "defaultSlot",
8495
- "type": {
8496
- "text": "HTMLSlotElement"
8497
- }
8498
- },
8499
- {
8500
- "kind": "method",
8501
- "name": "handleClick",
8502
- "privacy": "private",
8503
- "parameters": [
8504
- {
8505
- "name": "event",
8506
- "type": {
8507
- "text": "MouseEvent"
8508
- }
8509
- }
8510
- ]
8511
- },
8512
- {
8513
- "kind": "method",
8514
- "name": "handleKeyDown",
8515
- "privacy": "private",
8516
- "parameters": [
8517
- {
8518
- "name": "event",
8519
- "type": {
8520
- "text": "KeyboardEvent"
8521
- }
8522
- }
8523
- ]
8524
- },
8525
- {
8526
- "kind": "method",
8527
- "name": "handleMouseDown",
8528
- "privacy": "private",
8529
- "parameters": [
8530
- {
8531
- "name": "event",
8532
- "type": {
8533
- "text": "MouseEvent"
8534
- }
8535
- }
8536
- ]
8537
- },
8538
- {
8539
- "kind": "method",
8540
- "name": "handleSlotChange",
8541
- "privacy": "private"
8542
- },
8543
- {
8544
- "kind": "method",
8545
- "name": "isMenuItem",
8546
- "privacy": "private",
8547
- "parameters": [
8548
- {
8549
- "name": "item",
8550
- "type": {
8551
- "text": "HTMLElement"
8552
- }
8553
- }
8554
- ]
8555
- }
8556
- ],
8557
- "events": [
8558
- {
8559
- "type": {
8560
- "text": "{ item: FlowMenuItem }"
8561
- },
8562
- "description": "Emitted when a menu item is selected.",
8563
- "name": "flow-ui-select",
8564
- "reactName": "onFlowUiSelect"
8565
- }
8566
- ],
8567
- "superclass": {
8568
- "name": "FlowRdfElement",
8569
- "module": "/src/internal/flow-ui-rdf-element"
8570
- },
8571
- "summary": "Menus provide a list of options for the user to choose from.",
8572
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/menu",
8573
- "status": "stable",
8574
- "since": "2.0",
8575
- "tagName": "flow-ui-menu",
8576
- "customElement": true
8577
- }
8578
- ],
8579
- "exports": [
8580
- {
8581
- "kind": "js",
8582
- "name": "default",
8583
- "declaration": {
8584
- "name": "FlowMenu",
8585
- "module": "components/menu/menu.js"
8586
- }
8587
- },
8588
- {
8589
- "kind": "custom-element-definition",
8590
- "name": "flow-ui-menu",
8591
- "declaration": {
8592
- "name": "FlowMenu",
8593
- "module": "components/menu/menu.js"
8594
- }
8595
- }
8596
- ]
8597
- },
8598
8477
  {
8599
8478
  "kind": "javascript-module",
8600
8479
  "path": "components/menu-item/menu-item.js",
@@ -8818,37 +8697,158 @@
8818
8697
  },
8819
8698
  {
8820
8699
  "kind": "javascript-module",
8821
- "path": "components/menu-label/menu-label.js",
8700
+ "path": "components/menu/menu.js",
8822
8701
  "declarations": [
8823
8702
  {
8824
8703
  "kind": "class",
8825
8704
  "description": "",
8826
- "name": "FlowMenuLabel",
8827
- "cssParts": [
8828
- {
8829
- "description": "The component's base wrapper.",
8830
- "name": "base"
8831
- }
8832
- ],
8705
+ "name": "FlowMenu",
8833
8706
  "slots": [
8834
8707
  {
8835
- "description": "The menu label's content.",
8708
+ "description": "The menu's content, including menu items, menu labels, and dividers.",
8836
8709
  "name": ""
8837
8710
  }
8838
8711
  ],
8839
- "members": [],
8840
- "superclass": {
8841
- "name": "FlowRdfElement",
8842
- "module": "/src/internal/flow-ui-rdf-element"
8843
- },
8844
- "summary": "Menu labels are used to describe a group of menu items.",
8845
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/menu-label",
8846
- "status": "stable",
8847
- "since": "2.0",
8848
- "tagName": "flow-ui-menu-label",
8849
- "customElement": true
8850
- }
8851
- ],
8712
+ "members": [
8713
+ {
8714
+ "kind": "field",
8715
+ "name": "defaultSlot",
8716
+ "type": {
8717
+ "text": "HTMLSlotElement"
8718
+ }
8719
+ },
8720
+ {
8721
+ "kind": "method",
8722
+ "name": "handleClick",
8723
+ "privacy": "private",
8724
+ "parameters": [
8725
+ {
8726
+ "name": "event",
8727
+ "type": {
8728
+ "text": "MouseEvent"
8729
+ }
8730
+ }
8731
+ ]
8732
+ },
8733
+ {
8734
+ "kind": "method",
8735
+ "name": "handleKeyDown",
8736
+ "privacy": "private",
8737
+ "parameters": [
8738
+ {
8739
+ "name": "event",
8740
+ "type": {
8741
+ "text": "KeyboardEvent"
8742
+ }
8743
+ }
8744
+ ]
8745
+ },
8746
+ {
8747
+ "kind": "method",
8748
+ "name": "handleMouseDown",
8749
+ "privacy": "private",
8750
+ "parameters": [
8751
+ {
8752
+ "name": "event",
8753
+ "type": {
8754
+ "text": "MouseEvent"
8755
+ }
8756
+ }
8757
+ ]
8758
+ },
8759
+ {
8760
+ "kind": "method",
8761
+ "name": "handleSlotChange",
8762
+ "privacy": "private"
8763
+ },
8764
+ {
8765
+ "kind": "method",
8766
+ "name": "isMenuItem",
8767
+ "privacy": "private",
8768
+ "parameters": [
8769
+ {
8770
+ "name": "item",
8771
+ "type": {
8772
+ "text": "HTMLElement"
8773
+ }
8774
+ }
8775
+ ]
8776
+ }
8777
+ ],
8778
+ "events": [
8779
+ {
8780
+ "type": {
8781
+ "text": "{ item: FlowMenuItem }"
8782
+ },
8783
+ "description": "Emitted when a menu item is selected.",
8784
+ "name": "flow-ui-select",
8785
+ "reactName": "onFlowUiSelect"
8786
+ }
8787
+ ],
8788
+ "superclass": {
8789
+ "name": "FlowRdfElement",
8790
+ "module": "/src/internal/flow-ui-rdf-element"
8791
+ },
8792
+ "summary": "Menus provide a list of options for the user to choose from.",
8793
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/menu",
8794
+ "status": "stable",
8795
+ "since": "2.0",
8796
+ "tagName": "flow-ui-menu",
8797
+ "customElement": true
8798
+ }
8799
+ ],
8800
+ "exports": [
8801
+ {
8802
+ "kind": "js",
8803
+ "name": "default",
8804
+ "declaration": {
8805
+ "name": "FlowMenu",
8806
+ "module": "components/menu/menu.js"
8807
+ }
8808
+ },
8809
+ {
8810
+ "kind": "custom-element-definition",
8811
+ "name": "flow-ui-menu",
8812
+ "declaration": {
8813
+ "name": "FlowMenu",
8814
+ "module": "components/menu/menu.js"
8815
+ }
8816
+ }
8817
+ ]
8818
+ },
8819
+ {
8820
+ "kind": "javascript-module",
8821
+ "path": "components/menu-label/menu-label.js",
8822
+ "declarations": [
8823
+ {
8824
+ "kind": "class",
8825
+ "description": "",
8826
+ "name": "FlowMenuLabel",
8827
+ "cssParts": [
8828
+ {
8829
+ "description": "The component's base wrapper.",
8830
+ "name": "base"
8831
+ }
8832
+ ],
8833
+ "slots": [
8834
+ {
8835
+ "description": "The menu label's content.",
8836
+ "name": ""
8837
+ }
8838
+ ],
8839
+ "members": [],
8840
+ "superclass": {
8841
+ "name": "FlowRdfElement",
8842
+ "module": "/src/internal/flow-ui-rdf-element"
8843
+ },
8844
+ "summary": "Menu labels are used to describe a group of menu items.",
8845
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/menu-label",
8846
+ "status": "stable",
8847
+ "since": "2.0",
8848
+ "tagName": "flow-ui-menu-label",
8849
+ "customElement": true
8850
+ }
8851
+ ],
8852
8852
  "exports": [
8853
8853
  {
8854
8854
  "kind": "js",
@@ -11322,121 +11322,6 @@
11322
11322
  }
11323
11323
  ]
11324
11324
  },
11325
- {
11326
- "kind": "javascript-module",
11327
- "path": "components/resize-observer/resize-observer.js",
11328
- "declarations": [
11329
- {
11330
- "kind": "class",
11331
- "description": "",
11332
- "name": "FlowResizeObserver",
11333
- "slots": [
11334
- {
11335
- "description": "One or more elements to watch for resizing.",
11336
- "name": ""
11337
- }
11338
- ],
11339
- "members": [
11340
- {
11341
- "kind": "field",
11342
- "name": "resizeObserver",
11343
- "type": {
11344
- "text": "ResizeObserver"
11345
- },
11346
- "privacy": "private"
11347
- },
11348
- {
11349
- "kind": "field",
11350
- "name": "observedElements",
11351
- "type": {
11352
- "text": "HTMLElement[]"
11353
- },
11354
- "privacy": "private",
11355
- "default": "[]"
11356
- },
11357
- {
11358
- "kind": "field",
11359
- "name": "disabled",
11360
- "type": {
11361
- "text": "boolean"
11362
- },
11363
- "default": "false",
11364
- "description": "Disables the observer.",
11365
- "attribute": "disabled",
11366
- "reflects": true
11367
- },
11368
- {
11369
- "kind": "method",
11370
- "name": "handleSlotChange",
11371
- "privacy": "private"
11372
- },
11373
- {
11374
- "kind": "method",
11375
- "name": "startObserver",
11376
- "privacy": "private"
11377
- },
11378
- {
11379
- "kind": "method",
11380
- "name": "stopObserver",
11381
- "privacy": "private"
11382
- },
11383
- {
11384
- "kind": "method",
11385
- "name": "handleDisabledChange"
11386
- }
11387
- ],
11388
- "events": [
11389
- {
11390
- "type": {
11391
- "text": "{ entries: ResizeObserverEntry[] }"
11392
- },
11393
- "description": "Emitted when the element is resized.",
11394
- "name": "flow-ui-resize",
11395
- "reactName": "onFlowUiResize"
11396
- }
11397
- ],
11398
- "attributes": [
11399
- {
11400
- "name": "disabled",
11401
- "type": {
11402
- "text": "boolean"
11403
- },
11404
- "default": "false",
11405
- "description": "Disables the observer.",
11406
- "fieldName": "disabled"
11407
- }
11408
- ],
11409
- "superclass": {
11410
- "name": "FlowRdfElement",
11411
- "module": "/src/internal/flow-ui-rdf-element"
11412
- },
11413
- "summary": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
11414
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/resize-observer",
11415
- "status": "stable",
11416
- "since": "2.0",
11417
- "tagName": "flow-ui-resize-observer",
11418
- "customElement": true
11419
- }
11420
- ],
11421
- "exports": [
11422
- {
11423
- "kind": "js",
11424
- "name": "default",
11425
- "declaration": {
11426
- "name": "FlowResizeObserver",
11427
- "module": "components/resize-observer/resize-observer.js"
11428
- }
11429
- },
11430
- {
11431
- "kind": "custom-element-definition",
11432
- "name": "flow-ui-resize-observer",
11433
- "declaration": {
11434
- "name": "FlowResizeObserver",
11435
- "module": "components/resize-observer/resize-observer.js"
11436
- }
11437
- }
11438
- ]
11439
- },
11440
11325
  {
11441
11326
  "kind": "javascript-module",
11442
11327
  "path": "components/scroll-view/scroll-view.component.js",
@@ -11701,7 +11586,122 @@
11701
11586
  },
11702
11587
  {
11703
11588
  "kind": "javascript-module",
11704
- "path": "components/select/select.js",
11589
+ "path": "components/resize-observer/resize-observer.js",
11590
+ "declarations": [
11591
+ {
11592
+ "kind": "class",
11593
+ "description": "",
11594
+ "name": "FlowResizeObserver",
11595
+ "slots": [
11596
+ {
11597
+ "description": "One or more elements to watch for resizing.",
11598
+ "name": ""
11599
+ }
11600
+ ],
11601
+ "members": [
11602
+ {
11603
+ "kind": "field",
11604
+ "name": "resizeObserver",
11605
+ "type": {
11606
+ "text": "ResizeObserver"
11607
+ },
11608
+ "privacy": "private"
11609
+ },
11610
+ {
11611
+ "kind": "field",
11612
+ "name": "observedElements",
11613
+ "type": {
11614
+ "text": "HTMLElement[]"
11615
+ },
11616
+ "privacy": "private",
11617
+ "default": "[]"
11618
+ },
11619
+ {
11620
+ "kind": "field",
11621
+ "name": "disabled",
11622
+ "type": {
11623
+ "text": "boolean"
11624
+ },
11625
+ "default": "false",
11626
+ "description": "Disables the observer.",
11627
+ "attribute": "disabled",
11628
+ "reflects": true
11629
+ },
11630
+ {
11631
+ "kind": "method",
11632
+ "name": "handleSlotChange",
11633
+ "privacy": "private"
11634
+ },
11635
+ {
11636
+ "kind": "method",
11637
+ "name": "startObserver",
11638
+ "privacy": "private"
11639
+ },
11640
+ {
11641
+ "kind": "method",
11642
+ "name": "stopObserver",
11643
+ "privacy": "private"
11644
+ },
11645
+ {
11646
+ "kind": "method",
11647
+ "name": "handleDisabledChange"
11648
+ }
11649
+ ],
11650
+ "events": [
11651
+ {
11652
+ "type": {
11653
+ "text": "{ entries: ResizeObserverEntry[] }"
11654
+ },
11655
+ "description": "Emitted when the element is resized.",
11656
+ "name": "flow-ui-resize",
11657
+ "reactName": "onFlowUiResize"
11658
+ }
11659
+ ],
11660
+ "attributes": [
11661
+ {
11662
+ "name": "disabled",
11663
+ "type": {
11664
+ "text": "boolean"
11665
+ },
11666
+ "default": "false",
11667
+ "description": "Disables the observer.",
11668
+ "fieldName": "disabled"
11669
+ }
11670
+ ],
11671
+ "superclass": {
11672
+ "name": "FlowRdfElement",
11673
+ "module": "/src/internal/flow-ui-rdf-element"
11674
+ },
11675
+ "summary": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
11676
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/resize-observer",
11677
+ "status": "stable",
11678
+ "since": "2.0",
11679
+ "tagName": "flow-ui-resize-observer",
11680
+ "customElement": true
11681
+ }
11682
+ ],
11683
+ "exports": [
11684
+ {
11685
+ "kind": "js",
11686
+ "name": "default",
11687
+ "declaration": {
11688
+ "name": "FlowResizeObserver",
11689
+ "module": "components/resize-observer/resize-observer.js"
11690
+ }
11691
+ },
11692
+ {
11693
+ "kind": "custom-element-definition",
11694
+ "name": "flow-ui-resize-observer",
11695
+ "declaration": {
11696
+ "name": "FlowResizeObserver",
11697
+ "module": "components/resize-observer/resize-observer.js"
11698
+ }
11699
+ }
11700
+ ]
11701
+ },
11702
+ {
11703
+ "kind": "javascript-module",
11704
+ "path": "components/select/select.js",
11705
11705
  "declarations": [
11706
11706
  {
11707
11707
  "kind": "class",
@@ -14875,7 +14875,7 @@
14875
14875
  "kind": "field",
14876
14876
  "name": "activePanel",
14877
14877
  "type": {
14878
- "text": "FlowStepperPanel"
14878
+ "text": "FlowStepperPanel | undefined"
14879
14879
  },
14880
14880
  "privacy": "private"
14881
14881
  },
@@ -14944,6 +14944,13 @@
14944
14944
  "type": {
14945
14945
  "text": "FlowStepperPanel"
14946
14946
  }
14947
+ },
14948
+ {
14949
+ "name": "options",
14950
+ "optional": true,
14951
+ "type": {
14952
+ "text": "{ emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }"
14953
+ }
14947
14954
  }
14948
14955
  ]
14949
14956
  },
@@ -15929,272 +15936,401 @@
15929
15936
  },
15930
15937
  {
15931
15938
  "kind": "javascript-module",
15932
- "path": "components/tab-panel/tab-panel.js",
15939
+ "path": "components/tab-group/tab-group.js",
15933
15940
  "declarations": [
15934
15941
  {
15935
15942
  "kind": "class",
15936
15943
  "description": "",
15937
- "name": "FlowTabPanel",
15944
+ "name": "FlowTabGroup",
15938
15945
  "cssProperties": [
15939
15946
  {
15940
- "description": "The tab panel's padding.",
15941
- "name": "--padding"
15947
+ "description": "The color of the active tab indicator.",
15948
+ "name": "--indicator-color"
15949
+ },
15950
+ {
15951
+ "description": "The color of the indicator's track (the line that separates tabs from panels).",
15952
+ "name": "--track-color"
15953
+ },
15954
+ {
15955
+ "description": "The width of the indicator's track (the line that separates tabs from panels).",
15956
+ "name": "--track-width"
15942
15957
  }
15943
15958
  ],
15944
15959
  "cssParts": [
15945
15960
  {
15946
15961
  "description": "The component's base wrapper.",
15947
15962
  "name": "base"
15963
+ },
15964
+ {
15965
+ "description": "The tab group's navigation container where tabs are slotted in.",
15966
+ "name": "nav"
15967
+ },
15968
+ {
15969
+ "description": "The container that wraps the tabs.",
15970
+ "name": "tabs"
15971
+ },
15972
+ {
15973
+ "description": "The line that highlights the currently selected tab.",
15974
+ "name": "active-tab-indicator"
15975
+ },
15976
+ {
15977
+ "description": "The tab group's body where tab panels are slotted in.",
15978
+ "name": "body"
15979
+ },
15980
+ {
15981
+ "description": "The previous/next scroll buttons that show when tabs are scrollable, an `<flow-ui-icon-button>`.",
15982
+ "name": "scroll-button"
15983
+ },
15984
+ {
15985
+ "description": "The starting scroll button.",
15986
+ "name": "scroll-button--start"
15987
+ },
15988
+ {
15989
+ "description": "The ending scroll button.",
15990
+ "name": "scroll-button--end"
15991
+ },
15992
+ {
15993
+ "description": "The scroll button's exported `base` part.",
15994
+ "name": "scroll-button__base"
15948
15995
  }
15949
15996
  ],
15950
15997
  "slots": [
15951
15998
  {
15952
- "description": "The tab panel's content.",
15999
+ "description": "Used for grouping tab panels in the tab group. Must be `<flow-ui-tab-panel>` elements.",
15953
16000
  "name": ""
16001
+ },
16002
+ {
16003
+ "description": "Used for grouping tabs in the tab group. Must be `<flow-ui-tab>` elements.",
16004
+ "name": "nav"
15954
16005
  }
15955
16006
  ],
15956
16007
  "members": [
15957
16008
  {
15958
16009
  "kind": "field",
15959
- "name": "attrId",
15960
- "type": {
15961
- "text": "number"
15962
- },
16010
+ "name": "localize",
15963
16011
  "privacy": "private",
15964
16012
  "readonly": true,
15965
- "default": "++id"
16013
+ "default": "new LocalizeController(this)"
15966
16014
  },
15967
16015
  {
15968
16016
  "kind": "field",
15969
- "name": "componentId",
16017
+ "name": "hasSlotController",
15970
16018
  "privacy": "private",
15971
16019
  "readonly": true,
15972
- "default": "`flow-ui-tab-panel-${this.attrId}`"
16020
+ "default": "new HasSlotController(this, 'nav-accessories-start', 'nav-accessories-end')"
15973
16021
  },
15974
16022
  {
15975
16023
  "kind": "field",
15976
- "name": "name",
16024
+ "name": "activeTab",
15977
16025
  "type": {
15978
- "text": "string"
16026
+ "text": "FlowTab | undefined"
15979
16027
  },
15980
- "default": "''",
15981
- "description": "The tab panel's name.",
15982
- "attribute": "name",
15983
- "reflects": true
16028
+ "privacy": "private"
15984
16029
  },
15985
16030
  {
15986
16031
  "kind": "field",
15987
- "name": "active",
16032
+ "name": "mutationObserver",
15988
16033
  "type": {
15989
- "text": "boolean"
16034
+ "text": "MutationObserver"
15990
16035
  },
15991
- "default": "false",
15992
- "description": "When true, the tab panel will be shown.",
15993
- "attribute": "active",
15994
- "reflects": true
16036
+ "privacy": "private"
15995
16037
  },
15996
16038
  {
15997
- "kind": "method",
15998
- "name": "handleActiveChange"
15999
- }
16000
- ],
16001
- "attributes": [
16039
+ "kind": "field",
16040
+ "name": "resizeObserver",
16041
+ "type": {
16042
+ "text": "ResizeObserver"
16043
+ },
16044
+ "privacy": "private"
16045
+ },
16002
16046
  {
16003
- "name": "name",
16047
+ "kind": "field",
16048
+ "name": "tabs",
16004
16049
  "type": {
16005
- "text": "string"
16050
+ "text": "FlowTab[]"
16006
16051
  },
16007
- "default": "''",
16008
- "description": "The tab panel's name.",
16009
- "fieldName": "name"
16052
+ "privacy": "private",
16053
+ "default": "[]"
16010
16054
  },
16011
16055
  {
16012
- "name": "active",
16056
+ "kind": "field",
16057
+ "name": "panels",
16013
16058
  "type": {
16014
- "text": "boolean"
16059
+ "text": "FlowTabPanel[]"
16015
16060
  },
16016
- "default": "false",
16017
- "description": "When true, the tab panel will be shown.",
16018
- "fieldName": "active"
16019
- }
16020
- ],
16021
- "superclass": {
16022
- "name": "FlowRdfElement",
16023
- "module": "/src/internal/flow-ui-rdf-element"
16024
- },
16025
- "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
16026
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/tab-panel",
16027
- "status": "stable",
16028
- "since": "2.0",
16029
- "tagName": "flow-ui-tab-panel",
16030
- "customElement": true
16031
- }
16032
- ],
16033
- "exports": [
16034
- {
16035
- "kind": "js",
16036
- "name": "default",
16037
- "declaration": {
16038
- "name": "FlowTabPanel",
16039
- "module": "components/tab-panel/tab-panel.js"
16040
- }
16041
- },
16042
- {
16043
- "kind": "custom-element-definition",
16044
- "name": "flow-ui-tab-panel",
16045
- "declaration": {
16046
- "name": "FlowTabPanel",
16047
- "module": "components/tab-panel/tab-panel.js"
16048
- }
16049
- }
16050
- ]
16051
- },
16052
- {
16053
- "kind": "javascript-module",
16054
- "path": "components/tag/tag.js",
16055
- "declarations": [
16056
- {
16057
- "kind": "class",
16058
- "description": "",
16059
- "name": "FlowTag",
16060
- "cssParts": [
16061
- {
16062
- "description": "The component's base wrapper.",
16063
- "name": "base"
16061
+ "privacy": "private",
16062
+ "default": "[]"
16064
16063
  },
16065
16064
  {
16066
- "description": "The tag's content.",
16067
- "name": "content"
16065
+ "kind": "field",
16066
+ "name": "tabGroup",
16067
+ "type": {
16068
+ "text": "HTMLElement"
16069
+ }
16068
16070
  },
16069
16071
  {
16070
- "description": "The tag's remove button, an `<flow-ui-icon-button>`.",
16071
- "name": "remove-button"
16072
+ "kind": "field",
16073
+ "name": "body",
16074
+ "type": {
16075
+ "text": "HTMLSlotElement"
16076
+ }
16072
16077
  },
16073
16078
  {
16074
- "description": "The remove button's exported `base` part.",
16075
- "name": "remove-button__base"
16076
- }
16077
- ],
16078
- "slots": [
16079
+ "kind": "field",
16080
+ "name": "nav",
16081
+ "type": {
16082
+ "text": "HTMLElement"
16083
+ }
16084
+ },
16079
16085
  {
16080
- "description": "The tag's content.",
16081
- "name": ""
16082
- }
16083
- ],
16084
- "members": [
16086
+ "kind": "field",
16087
+ "name": "indicator",
16088
+ "type": {
16089
+ "text": "HTMLElement"
16090
+ }
16091
+ },
16085
16092
  {
16086
16093
  "kind": "field",
16087
- "name": "localize",
16094
+ "name": "hasScrollControls",
16095
+ "type": {
16096
+ "text": "boolean"
16097
+ },
16088
16098
  "privacy": "private",
16089
- "readonly": true,
16090
- "default": "new LocalizeController(this)"
16099
+ "default": "false"
16091
16100
  },
16092
16101
  {
16093
16102
  "kind": "field",
16094
- "name": "variant",
16103
+ "name": "placement",
16095
16104
  "type": {
16096
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
16105
+ "text": "'top' | 'bottom' | 'start' | 'end'"
16097
16106
  },
16098
- "default": "'neutral'",
16099
- "description": "The tag's theme variant.",
16100
- "attribute": "variant",
16101
- "reflects": true
16107
+ "default": "'top'",
16108
+ "description": "The placement of the tabs.",
16109
+ "attribute": "placement"
16102
16110
  },
16103
16111
  {
16104
16112
  "kind": "field",
16105
- "name": "size",
16113
+ "name": "activation",
16106
16114
  "type": {
16107
- "text": "'small' | 'medium' | 'large'"
16115
+ "text": "'auto' | 'manual'"
16108
16116
  },
16109
- "default": "'medium'",
16110
- "description": "The tag's size.",
16111
- "attribute": "size",
16112
- "reflects": true
16117
+ "default": "'auto'",
16118
+ "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
16119
+ "attribute": "activation"
16113
16120
  },
16114
16121
  {
16115
16122
  "kind": "field",
16116
- "name": "pill",
16123
+ "name": "noScrollControls",
16117
16124
  "type": {
16118
16125
  "text": "boolean"
16119
16126
  },
16120
16127
  "default": "false",
16121
- "description": "Draws a pill-style tag with rounded edges.",
16122
- "attribute": "pill",
16123
- "reflects": true
16128
+ "description": "Disables the scroll arrows that appear when tabs overflow.",
16129
+ "attribute": "no-scroll-controls"
16124
16130
  },
16125
16131
  {
16126
16132
  "kind": "field",
16127
- "name": "removable",
16133
+ "name": "controlSplitPanel",
16128
16134
  "type": {
16129
16135
  "text": "boolean"
16130
16136
  },
16131
16137
  "default": "false",
16132
- "description": "Makes the tag removable and shows a remove button.",
16133
- "attribute": "removable"
16138
+ "attribute": "control-split-panel"
16134
16139
  },
16135
16140
  {
16136
16141
  "kind": "method",
16137
- "name": "handleRemoveClick",
16142
+ "name": "getAllTabs",
16143
+ "privacy": "private",
16144
+ "parameters": [
16145
+ {
16146
+ "name": "options",
16147
+ "default": "{ includeDisabled: true }",
16148
+ "type": {
16149
+ "text": "{ includeDisabled: boolean }"
16150
+ }
16151
+ }
16152
+ ]
16153
+ },
16154
+ {
16155
+ "kind": "method",
16156
+ "name": "getAllPanels",
16157
+ "privacy": "private"
16158
+ },
16159
+ {
16160
+ "kind": "method",
16161
+ "name": "getActiveTab",
16162
+ "privacy": "private"
16163
+ },
16164
+ {
16165
+ "kind": "method",
16166
+ "name": "handleClick",
16167
+ "privacy": "private",
16168
+ "parameters": [
16169
+ {
16170
+ "name": "event",
16171
+ "type": {
16172
+ "text": "MouseEvent"
16173
+ }
16174
+ }
16175
+ ]
16176
+ },
16177
+ {
16178
+ "kind": "method",
16179
+ "name": "handleKeyDown",
16180
+ "privacy": "private",
16181
+ "parameters": [
16182
+ {
16183
+ "name": "event",
16184
+ "type": {
16185
+ "text": "KeyboardEvent"
16186
+ }
16187
+ }
16188
+ ]
16189
+ },
16190
+ {
16191
+ "kind": "method",
16192
+ "name": "handleScrollToStart",
16193
+ "privacy": "private"
16194
+ },
16195
+ {
16196
+ "kind": "method",
16197
+ "name": "handleScrollToEnd",
16198
+ "privacy": "private"
16199
+ },
16200
+ {
16201
+ "kind": "method",
16202
+ "name": "isHorizontal",
16203
+ "privacy": "private"
16204
+ },
16205
+ {
16206
+ "kind": "method",
16207
+ "name": "setActiveTab",
16208
+ "privacy": "private",
16209
+ "parameters": [
16210
+ {
16211
+ "name": "tab",
16212
+ "type": {
16213
+ "text": "FlowTab"
16214
+ }
16215
+ },
16216
+ {
16217
+ "name": "options",
16218
+ "optional": true,
16219
+ "type": {
16220
+ "text": "{ emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }"
16221
+ }
16222
+ }
16223
+ ]
16224
+ },
16225
+ {
16226
+ "kind": "method",
16227
+ "name": "setAriaLabels",
16228
+ "privacy": "private"
16229
+ },
16230
+ {
16231
+ "kind": "method",
16232
+ "name": "repositionIndicator",
16233
+ "privacy": "private"
16234
+ },
16235
+ {
16236
+ "kind": "method",
16237
+ "name": "syncTabsAndPanels",
16238
+ "privacy": "private"
16239
+ },
16240
+ {
16241
+ "kind": "method",
16242
+ "name": "getParentSplitPanel",
16138
16243
  "privacy": "private"
16244
+ },
16245
+ {
16246
+ "kind": "method",
16247
+ "name": "updateScrollControls"
16248
+ },
16249
+ {
16250
+ "kind": "method",
16251
+ "name": "syncIndicator"
16252
+ },
16253
+ {
16254
+ "kind": "method",
16255
+ "name": "show",
16256
+ "parameters": [
16257
+ {
16258
+ "name": "panel",
16259
+ "type": {
16260
+ "text": "string"
16261
+ }
16262
+ }
16263
+ ],
16264
+ "description": "Shows the specified tab panel."
16139
16265
  }
16140
16266
  ],
16141
16267
  "events": [
16142
16268
  {
16143
- "description": "Emitted when the remove button is activated.",
16144
- "name": "flow-ui-remove",
16145
- "reactName": "onFlowUiRemove"
16269
+ "type": {
16270
+ "text": "{ name: String }"
16271
+ },
16272
+ "description": "Emitted when a tab is shown.",
16273
+ "name": "flow-ui-tab-show",
16274
+ "reactName": "onFlowUiTabShow"
16275
+ },
16276
+ {
16277
+ "type": {
16278
+ "text": "{ name: String }"
16279
+ },
16280
+ "description": "Emitted when a tab is hidden.",
16281
+ "name": "flow-ui-tab-hide",
16282
+ "reactName": "onFlowUiTabHide"
16146
16283
  }
16147
16284
  ],
16148
16285
  "attributes": [
16149
16286
  {
16150
- "name": "variant",
16287
+ "name": "placement",
16151
16288
  "type": {
16152
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
16289
+ "text": "'top' | 'bottom' | 'start' | 'end'"
16153
16290
  },
16154
- "default": "'neutral'",
16155
- "description": "The tag's theme variant.",
16156
- "fieldName": "variant"
16291
+ "default": "'top'",
16292
+ "description": "The placement of the tabs.",
16293
+ "fieldName": "placement"
16157
16294
  },
16158
16295
  {
16159
- "name": "size",
16296
+ "name": "activation",
16160
16297
  "type": {
16161
- "text": "'small' | 'medium' | 'large'"
16298
+ "text": "'auto' | 'manual'"
16162
16299
  },
16163
- "default": "'medium'",
16164
- "description": "The tag's size.",
16165
- "fieldName": "size"
16300
+ "default": "'auto'",
16301
+ "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
16302
+ "fieldName": "activation"
16166
16303
  },
16167
16304
  {
16168
- "name": "pill",
16305
+ "name": "no-scroll-controls",
16169
16306
  "type": {
16170
16307
  "text": "boolean"
16171
16308
  },
16172
16309
  "default": "false",
16173
- "description": "Draws a pill-style tag with rounded edges.",
16174
- "fieldName": "pill"
16310
+ "description": "Disables the scroll arrows that appear when tabs overflow.",
16311
+ "fieldName": "noScrollControls"
16175
16312
  },
16176
16313
  {
16177
- "name": "removable",
16314
+ "name": "control-split-panel",
16178
16315
  "type": {
16179
16316
  "text": "boolean"
16180
16317
  },
16181
16318
  "default": "false",
16182
- "description": "Makes the tag removable and shows a remove button.",
16183
- "fieldName": "removable"
16319
+ "fieldName": "controlSplitPanel"
16184
16320
  }
16185
16321
  ],
16186
16322
  "superclass": {
16187
16323
  "name": "FlowRdfElement",
16188
16324
  "module": "/src/internal/flow-ui-rdf-element"
16189
16325
  },
16190
- "summary": "Tags are used as labels to organize things or to indicate a selection.",
16191
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/tag",
16326
+ "summary": "Tab groups organize content into a container that shows one section at a time.",
16327
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/tab-group",
16192
16328
  "status": "stable",
16193
16329
  "since": "2.0",
16194
16330
  "dependencies": [
16195
16331
  "flow-ui-icon-button"
16196
16332
  ],
16197
- "tagName": "flow-ui-tag",
16333
+ "tagName": "flow-ui-tab-group",
16198
16334
  "customElement": true
16199
16335
  }
16200
16336
  ],
@@ -16203,417 +16339,288 @@
16203
16339
  "kind": "js",
16204
16340
  "name": "default",
16205
16341
  "declaration": {
16206
- "name": "FlowTag",
16207
- "module": "components/tag/tag.js"
16342
+ "name": "FlowTabGroup",
16343
+ "module": "components/tab-group/tab-group.js"
16208
16344
  }
16209
16345
  },
16210
16346
  {
16211
16347
  "kind": "custom-element-definition",
16212
- "name": "flow-ui-tag",
16348
+ "name": "flow-ui-tab-group",
16213
16349
  "declaration": {
16214
- "name": "FlowTag",
16215
- "module": "components/tag/tag.js"
16350
+ "name": "FlowTabGroup",
16351
+ "module": "components/tab-group/tab-group.js"
16216
16352
  }
16217
16353
  }
16218
16354
  ]
16219
16355
  },
16220
16356
  {
16221
16357
  "kind": "javascript-module",
16222
- "path": "components/tab-group/tab-group.js",
16358
+ "path": "components/tab-panel/tab-panel.js",
16223
16359
  "declarations": [
16224
16360
  {
16225
16361
  "kind": "class",
16226
16362
  "description": "",
16227
- "name": "FlowTabGroup",
16363
+ "name": "FlowTabPanel",
16228
16364
  "cssProperties": [
16229
16365
  {
16230
- "description": "The color of the active tab indicator.",
16231
- "name": "--indicator-color"
16232
- },
16233
- {
16234
- "description": "The color of the indicator's track (the line that separates tabs from panels).",
16235
- "name": "--track-color"
16236
- },
16237
- {
16238
- "description": "The width of the indicator's track (the line that separates tabs from panels).",
16239
- "name": "--track-width"
16366
+ "description": "The tab panel's padding.",
16367
+ "name": "--padding"
16240
16368
  }
16241
16369
  ],
16242
16370
  "cssParts": [
16243
16371
  {
16244
16372
  "description": "The component's base wrapper.",
16245
16373
  "name": "base"
16246
- },
16247
- {
16248
- "description": "The tab group's navigation container where tabs are slotted in.",
16249
- "name": "nav"
16250
- },
16251
- {
16252
- "description": "The container that wraps the tabs.",
16253
- "name": "tabs"
16254
- },
16255
- {
16256
- "description": "The line that highlights the currently selected tab.",
16257
- "name": "active-tab-indicator"
16258
- },
16259
- {
16260
- "description": "The tab group's body where tab panels are slotted in.",
16261
- "name": "body"
16262
- },
16263
- {
16264
- "description": "The previous/next scroll buttons that show when tabs are scrollable, an `<flow-ui-icon-button>`.",
16265
- "name": "scroll-button"
16266
- },
16267
- {
16268
- "description": "The starting scroll button.",
16269
- "name": "scroll-button--start"
16270
- },
16271
- {
16272
- "description": "The ending scroll button.",
16273
- "name": "scroll-button--end"
16274
- },
16275
- {
16276
- "description": "The scroll button's exported `base` part.",
16277
- "name": "scroll-button__base"
16278
16374
  }
16279
16375
  ],
16280
16376
  "slots": [
16281
16377
  {
16282
- "description": "Used for grouping tab panels in the tab group. Must be `<flow-ui-tab-panel>` elements.",
16378
+ "description": "The tab panel's content.",
16283
16379
  "name": ""
16284
- },
16285
- {
16286
- "description": "Used for grouping tabs in the tab group. Must be `<flow-ui-tab>` elements.",
16287
- "name": "nav"
16288
16380
  }
16289
16381
  ],
16290
16382
  "members": [
16291
16383
  {
16292
16384
  "kind": "field",
16293
- "name": "localize",
16385
+ "name": "attrId",
16386
+ "type": {
16387
+ "text": "number"
16388
+ },
16294
16389
  "privacy": "private",
16295
16390
  "readonly": true,
16296
- "default": "new LocalizeController(this)"
16391
+ "default": "++id"
16297
16392
  },
16298
16393
  {
16299
16394
  "kind": "field",
16300
- "name": "hasSlotController",
16395
+ "name": "componentId",
16301
16396
  "privacy": "private",
16302
16397
  "readonly": true,
16303
- "default": "new HasSlotController(this, 'nav-accessories-start', 'nav-accessories-end')"
16398
+ "default": "`flow-ui-tab-panel-${this.attrId}`"
16304
16399
  },
16305
16400
  {
16306
16401
  "kind": "field",
16307
- "name": "activeTab",
16402
+ "name": "name",
16308
16403
  "type": {
16309
- "text": "FlowTab | undefined"
16404
+ "text": "string"
16310
16405
  },
16311
- "privacy": "private"
16406
+ "default": "''",
16407
+ "description": "The tab panel's name.",
16408
+ "attribute": "name",
16409
+ "reflects": true
16312
16410
  },
16313
16411
  {
16314
16412
  "kind": "field",
16315
- "name": "mutationObserver",
16413
+ "name": "active",
16316
16414
  "type": {
16317
- "text": "MutationObserver"
16415
+ "text": "boolean"
16318
16416
  },
16319
- "privacy": "private"
16417
+ "default": "false",
16418
+ "description": "When true, the tab panel will be shown.",
16419
+ "attribute": "active",
16420
+ "reflects": true
16320
16421
  },
16321
16422
  {
16322
- "kind": "field",
16323
- "name": "resizeObserver",
16324
- "type": {
16325
- "text": "ResizeObserver"
16326
- },
16327
- "privacy": "private"
16328
- },
16423
+ "kind": "method",
16424
+ "name": "handleActiveChange"
16425
+ }
16426
+ ],
16427
+ "attributes": [
16329
16428
  {
16330
- "kind": "field",
16331
- "name": "tabs",
16429
+ "name": "name",
16332
16430
  "type": {
16333
- "text": "FlowTab[]"
16431
+ "text": "string"
16334
16432
  },
16335
- "privacy": "private",
16336
- "default": "[]"
16433
+ "default": "''",
16434
+ "description": "The tab panel's name.",
16435
+ "fieldName": "name"
16337
16436
  },
16338
16437
  {
16339
- "kind": "field",
16340
- "name": "panels",
16438
+ "name": "active",
16341
16439
  "type": {
16342
- "text": "FlowTabPanel[]"
16440
+ "text": "boolean"
16343
16441
  },
16344
- "privacy": "private",
16345
- "default": "[]"
16346
- },
16347
- {
16348
- "kind": "field",
16349
- "name": "tabGroup",
16350
- "type": {
16351
- "text": "HTMLElement"
16352
- }
16353
- },
16442
+ "default": "false",
16443
+ "description": "When true, the tab panel will be shown.",
16444
+ "fieldName": "active"
16445
+ }
16446
+ ],
16447
+ "superclass": {
16448
+ "name": "FlowRdfElement",
16449
+ "module": "/src/internal/flow-ui-rdf-element"
16450
+ },
16451
+ "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
16452
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/tab-panel",
16453
+ "status": "stable",
16454
+ "since": "2.0",
16455
+ "tagName": "flow-ui-tab-panel",
16456
+ "customElement": true
16457
+ }
16458
+ ],
16459
+ "exports": [
16460
+ {
16461
+ "kind": "js",
16462
+ "name": "default",
16463
+ "declaration": {
16464
+ "name": "FlowTabPanel",
16465
+ "module": "components/tab-panel/tab-panel.js"
16466
+ }
16467
+ },
16468
+ {
16469
+ "kind": "custom-element-definition",
16470
+ "name": "flow-ui-tab-panel",
16471
+ "declaration": {
16472
+ "name": "FlowTabPanel",
16473
+ "module": "components/tab-panel/tab-panel.js"
16474
+ }
16475
+ }
16476
+ ]
16477
+ },
16478
+ {
16479
+ "kind": "javascript-module",
16480
+ "path": "components/tag/tag.js",
16481
+ "declarations": [
16482
+ {
16483
+ "kind": "class",
16484
+ "description": "",
16485
+ "name": "FlowTag",
16486
+ "cssParts": [
16354
16487
  {
16355
- "kind": "field",
16356
- "name": "body",
16357
- "type": {
16358
- "text": "HTMLSlotElement"
16359
- }
16488
+ "description": "The component's base wrapper.",
16489
+ "name": "base"
16360
16490
  },
16361
16491
  {
16362
- "kind": "field",
16363
- "name": "nav",
16364
- "type": {
16365
- "text": "HTMLElement"
16366
- }
16492
+ "description": "The tag's content.",
16493
+ "name": "content"
16367
16494
  },
16368
16495
  {
16369
- "kind": "field",
16370
- "name": "indicator",
16371
- "type": {
16372
- "text": "HTMLElement"
16373
- }
16496
+ "description": "The tag's remove button, an `<flow-ui-icon-button>`.",
16497
+ "name": "remove-button"
16374
16498
  },
16499
+ {
16500
+ "description": "The remove button's exported `base` part.",
16501
+ "name": "remove-button__base"
16502
+ }
16503
+ ],
16504
+ "slots": [
16505
+ {
16506
+ "description": "The tag's content.",
16507
+ "name": ""
16508
+ }
16509
+ ],
16510
+ "members": [
16375
16511
  {
16376
16512
  "kind": "field",
16377
- "name": "hasScrollControls",
16378
- "type": {
16379
- "text": "boolean"
16380
- },
16513
+ "name": "localize",
16381
16514
  "privacy": "private",
16382
- "default": "false"
16515
+ "readonly": true,
16516
+ "default": "new LocalizeController(this)"
16383
16517
  },
16384
16518
  {
16385
16519
  "kind": "field",
16386
- "name": "placement",
16520
+ "name": "variant",
16387
16521
  "type": {
16388
- "text": "'top' | 'bottom' | 'start' | 'end'"
16522
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
16389
16523
  },
16390
- "default": "'top'",
16391
- "description": "The placement of the tabs.",
16392
- "attribute": "placement"
16524
+ "default": "'neutral'",
16525
+ "description": "The tag's theme variant.",
16526
+ "attribute": "variant",
16527
+ "reflects": true
16393
16528
  },
16394
16529
  {
16395
16530
  "kind": "field",
16396
- "name": "activation",
16531
+ "name": "size",
16397
16532
  "type": {
16398
- "text": "'auto' | 'manual'"
16533
+ "text": "'small' | 'medium' | 'large'"
16399
16534
  },
16400
- "default": "'auto'",
16401
- "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
16402
- "attribute": "activation"
16535
+ "default": "'medium'",
16536
+ "description": "The tag's size.",
16537
+ "attribute": "size",
16538
+ "reflects": true
16403
16539
  },
16404
16540
  {
16405
16541
  "kind": "field",
16406
- "name": "noScrollControls",
16542
+ "name": "pill",
16407
16543
  "type": {
16408
16544
  "text": "boolean"
16409
16545
  },
16410
16546
  "default": "false",
16411
- "description": "Disables the scroll arrows that appear when tabs overflow.",
16412
- "attribute": "no-scroll-controls"
16547
+ "description": "Draws a pill-style tag with rounded edges.",
16548
+ "attribute": "pill",
16549
+ "reflects": true
16413
16550
  },
16414
16551
  {
16415
16552
  "kind": "field",
16416
- "name": "controlSplitPanel",
16553
+ "name": "removable",
16417
16554
  "type": {
16418
16555
  "text": "boolean"
16419
16556
  },
16420
16557
  "default": "false",
16421
- "attribute": "control-split-panel"
16422
- },
16423
- {
16424
- "kind": "method",
16425
- "name": "getAllTabs",
16426
- "privacy": "private",
16427
- "parameters": [
16428
- {
16429
- "name": "options",
16430
- "default": "{ includeDisabled: true }",
16431
- "type": {
16432
- "text": "{ includeDisabled: boolean }"
16433
- }
16434
- }
16435
- ]
16436
- },
16437
- {
16438
- "kind": "method",
16439
- "name": "getAllPanels",
16440
- "privacy": "private"
16441
- },
16442
- {
16443
- "kind": "method",
16444
- "name": "getActiveTab",
16445
- "privacy": "private"
16446
- },
16447
- {
16448
- "kind": "method",
16449
- "name": "handleClick",
16450
- "privacy": "private",
16451
- "parameters": [
16452
- {
16453
- "name": "event",
16454
- "type": {
16455
- "text": "MouseEvent"
16456
- }
16457
- }
16458
- ]
16459
- },
16460
- {
16461
- "kind": "method",
16462
- "name": "handleKeyDown",
16463
- "privacy": "private",
16464
- "parameters": [
16465
- {
16466
- "name": "event",
16467
- "type": {
16468
- "text": "KeyboardEvent"
16469
- }
16470
- }
16471
- ]
16472
- },
16473
- {
16474
- "kind": "method",
16475
- "name": "handleScrollToStart",
16476
- "privacy": "private"
16477
- },
16478
- {
16479
- "kind": "method",
16480
- "name": "handleScrollToEnd",
16481
- "privacy": "private"
16482
- },
16483
- {
16484
- "kind": "method",
16485
- "name": "isHorizontal",
16486
- "privacy": "private"
16487
- },
16488
- {
16489
- "kind": "method",
16490
- "name": "setActiveTab",
16491
- "privacy": "private",
16492
- "parameters": [
16493
- {
16494
- "name": "tab",
16495
- "type": {
16496
- "text": "FlowTab"
16497
- }
16498
- },
16499
- {
16500
- "name": "options",
16501
- "optional": true,
16502
- "type": {
16503
- "text": "{ emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }"
16504
- }
16505
- }
16506
- ]
16507
- },
16508
- {
16509
- "kind": "method",
16510
- "name": "setAriaLabels",
16511
- "privacy": "private"
16512
- },
16513
- {
16514
- "kind": "method",
16515
- "name": "repositionIndicator",
16516
- "privacy": "private"
16517
- },
16518
- {
16519
- "kind": "method",
16520
- "name": "syncTabsAndPanels",
16521
- "privacy": "private"
16558
+ "description": "Makes the tag removable and shows a remove button.",
16559
+ "attribute": "removable"
16522
16560
  },
16523
16561
  {
16524
16562
  "kind": "method",
16525
- "name": "getParentSplitPanel",
16563
+ "name": "handleRemoveClick",
16526
16564
  "privacy": "private"
16527
- },
16528
- {
16529
- "kind": "method",
16530
- "name": "updateScrollControls"
16531
- },
16532
- {
16533
- "kind": "method",
16534
- "name": "syncIndicator"
16535
- },
16536
- {
16537
- "kind": "method",
16538
- "name": "show",
16539
- "parameters": [
16540
- {
16541
- "name": "panel",
16542
- "type": {
16543
- "text": "string"
16544
- }
16545
- }
16546
- ],
16547
- "description": "Shows the specified tab panel."
16548
16565
  }
16549
16566
  ],
16550
16567
  "events": [
16551
16568
  {
16552
- "type": {
16553
- "text": "{ name: String }"
16554
- },
16555
- "description": "Emitted when a tab is shown.",
16556
- "name": "flow-ui-tab-show",
16557
- "reactName": "onFlowUiTabShow"
16558
- },
16559
- {
16560
- "type": {
16561
- "text": "{ name: String }"
16562
- },
16563
- "description": "Emitted when a tab is hidden.",
16564
- "name": "flow-ui-tab-hide",
16565
- "reactName": "onFlowUiTabHide"
16569
+ "description": "Emitted when the remove button is activated.",
16570
+ "name": "flow-ui-remove",
16571
+ "reactName": "onFlowUiRemove"
16566
16572
  }
16567
16573
  ],
16568
16574
  "attributes": [
16569
16575
  {
16570
- "name": "placement",
16576
+ "name": "variant",
16571
16577
  "type": {
16572
- "text": "'top' | 'bottom' | 'start' | 'end'"
16578
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
16573
16579
  },
16574
- "default": "'top'",
16575
- "description": "The placement of the tabs.",
16576
- "fieldName": "placement"
16580
+ "default": "'neutral'",
16581
+ "description": "The tag's theme variant.",
16582
+ "fieldName": "variant"
16577
16583
  },
16578
16584
  {
16579
- "name": "activation",
16585
+ "name": "size",
16580
16586
  "type": {
16581
- "text": "'auto' | 'manual'"
16587
+ "text": "'small' | 'medium' | 'large'"
16582
16588
  },
16583
- "default": "'auto'",
16584
- "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
16585
- "fieldName": "activation"
16589
+ "default": "'medium'",
16590
+ "description": "The tag's size.",
16591
+ "fieldName": "size"
16586
16592
  },
16587
16593
  {
16588
- "name": "no-scroll-controls",
16594
+ "name": "pill",
16589
16595
  "type": {
16590
16596
  "text": "boolean"
16591
16597
  },
16592
16598
  "default": "false",
16593
- "description": "Disables the scroll arrows that appear when tabs overflow.",
16594
- "fieldName": "noScrollControls"
16599
+ "description": "Draws a pill-style tag with rounded edges.",
16600
+ "fieldName": "pill"
16595
16601
  },
16596
16602
  {
16597
- "name": "control-split-panel",
16603
+ "name": "removable",
16598
16604
  "type": {
16599
16605
  "text": "boolean"
16600
16606
  },
16601
16607
  "default": "false",
16602
- "fieldName": "controlSplitPanel"
16608
+ "description": "Makes the tag removable and shows a remove button.",
16609
+ "fieldName": "removable"
16603
16610
  }
16604
16611
  ],
16605
16612
  "superclass": {
16606
16613
  "name": "FlowRdfElement",
16607
16614
  "module": "/src/internal/flow-ui-rdf-element"
16608
16615
  },
16609
- "summary": "Tab groups organize content into a container that shows one section at a time.",
16610
- "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/tab-group",
16616
+ "summary": "Tags are used as labels to organize things or to indicate a selection.",
16617
+ "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/tag",
16611
16618
  "status": "stable",
16612
16619
  "since": "2.0",
16613
16620
  "dependencies": [
16614
16621
  "flow-ui-icon-button"
16615
16622
  ],
16616
- "tagName": "flow-ui-tab-group",
16623
+ "tagName": "flow-ui-tag",
16617
16624
  "customElement": true
16618
16625
  }
16619
16626
  ],
@@ -16622,16 +16629,16 @@
16622
16629
  "kind": "js",
16623
16630
  "name": "default",
16624
16631
  "declaration": {
16625
- "name": "FlowTabGroup",
16626
- "module": "components/tab-group/tab-group.js"
16632
+ "name": "FlowTag",
16633
+ "module": "components/tag/tag.js"
16627
16634
  }
16628
16635
  },
16629
16636
  {
16630
16637
  "kind": "custom-element-definition",
16631
- "name": "flow-ui-tab-group",
16638
+ "name": "flow-ui-tag",
16632
16639
  "declaration": {
16633
- "name": "FlowTabGroup",
16634
- "module": "components/tab-group/tab-group.js"
16640
+ "name": "FlowTag",
16641
+ "module": "components/tag/tag.js"
16635
16642
  }
16636
16643
  }
16637
16644
  ]
@@ -19446,6 +19453,6 @@
19446
19453
  ],
19447
19454
  "package": {
19448
19455
  "name": "@emuanalytics/flow-rdf-ui",
19449
- "version": "0.0.6"
19456
+ "version": "0.0.8"
19450
19457
  }
19451
19458
  }