@synergy-design-system/react 2.17.0 → 2.18.0
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.
|
@@ -0,0 +1,2765 @@
|
|
|
1
|
+
import type { DOMAttributes } from 'react';
|
|
2
|
+
import type { SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent, SynBlurEvent, SynFocusEvent, SynInvalidEvent, SynChangeEvent, SynInputEvent, SynClearEvent, SynErrorEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynBurgerMenuClosedEvent, SynBurgerMenuHiddenEvent, SynBurgerMenuOpenEvent, SynLoadEvent, SynSelectEvent, SynRepositionEvent, SynMoveEvent, SynCloseEvent, SynTabShowEvent, SynTabHideEvent, SynRemoveEvent, SynAccordion, SynAlert, SynBadge, SynBreadcrumb, SynBreadcrumbItem, SynButton, SynButtonGroup, SynCard, SynCheckbox, SynCombobox, SynDetails, SynDialog, SynDivider, SynDrawer, SynDropdown, SynFile, SynHeader, SynIcon, SynIconButton, SynInput, SynMenu, SynMenuItem, SynMenuLabel, SynNavItem, SynOptgroup, SynOption, SynPopup, SynPrioNav, SynProgressBar, SynProgressRing, SynRadio, SynRadioButton, SynRadioGroup, SynRange, SynRangeTick, SynSelect, SynSideNav, SynSpinner, SynSwitch, SynTab, SynTabGroup, SynTabPanel, SynTag, SynTextarea, SynTooltip, SynValidate } from '@synergy-design-system/components';
|
|
3
|
+
/**
|
|
4
|
+
* Used core types
|
|
5
|
+
* @see https://coryrylan.com/blog/how-to-use-web-components-with-typescript-and-react
|
|
6
|
+
*/
|
|
7
|
+
type SynEventTuple = [string, unknown];
|
|
8
|
+
type SynEventMap<T extends SynEventTuple[]> = {
|
|
9
|
+
[K in T[number] as `on${K[0]}`]: (event: K[1]) => void;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Synergy custom element type definition
|
|
13
|
+
* This type is used to define the custom elements in the Synergy Design System
|
|
14
|
+
*/
|
|
15
|
+
export type SynCustomElement<SynElement extends HTMLElement, Events extends SynEventTuple[] = []> = Partial<SynElement & DOMAttributes<SynElement> & {
|
|
16
|
+
children?: any;
|
|
17
|
+
key?: any;
|
|
18
|
+
} & SynEventMap<Events>>;
|
|
19
|
+
/**
|
|
20
|
+
* @summary Accordions provide the ability to group a list of `<syn-details>`.
|
|
21
|
+
*
|
|
22
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
|
|
23
|
+
* @status stable
|
|
24
|
+
* @since 1.23.0
|
|
25
|
+
*
|
|
26
|
+
* @slot - The accordion's main content. Must be `<syn-details />` elements.
|
|
27
|
+
*
|
|
28
|
+
* @csspart base - The component's base wrapper.
|
|
29
|
+
*/ export type SynAccordionJSXElement = SynCustomElement<SynAccordion, []>;
|
|
30
|
+
/**
|
|
31
|
+
* @summary Alerts are used to display important messages inline or as toast notifications.
|
|
32
|
+
* @documentation https://synergy.style/components/alert
|
|
33
|
+
* @status stable
|
|
34
|
+
* @since 2.0
|
|
35
|
+
*
|
|
36
|
+
* @dependency syn-icon-button
|
|
37
|
+
*
|
|
38
|
+
* @slot - The alert's main content.
|
|
39
|
+
* @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
|
|
40
|
+
*
|
|
41
|
+
* @event syn-show - Emitted when the alert opens.
|
|
42
|
+
* @event syn-after-show - Emitted after the alert opens and all animations are complete.
|
|
43
|
+
* @event syn-hide - Emitted when the alert closes.
|
|
44
|
+
* @event syn-after-hide - Emitted after the alert closes and all animations are complete.
|
|
45
|
+
*
|
|
46
|
+
* @csspart base - The component's base wrapper.
|
|
47
|
+
* @csspart icon - The container that wraps the optional icon.
|
|
48
|
+
* @csspart message - The container that wraps the alert's main content.
|
|
49
|
+
* @csspart close-button - The close button, an `<syn-icon-button>`.
|
|
50
|
+
* @csspart close-button__base - The close button's exported `base` part.
|
|
51
|
+
*
|
|
52
|
+
* @animation alert.show - The animation to use when showing the alert.
|
|
53
|
+
* @animation alert.hide - The animation to use when hiding the alert.
|
|
54
|
+
*/ export type SynAlertJSXElement = SynCustomElement<SynAlert, [
|
|
55
|
+
[
|
|
56
|
+
'syn-show',
|
|
57
|
+
SynShowEvent
|
|
58
|
+
],
|
|
59
|
+
[
|
|
60
|
+
'syn-after-show',
|
|
61
|
+
SynAfterShowEvent
|
|
62
|
+
],
|
|
63
|
+
[
|
|
64
|
+
'syn-hide',
|
|
65
|
+
SynHideEvent
|
|
66
|
+
],
|
|
67
|
+
[
|
|
68
|
+
'syn-after-hide',
|
|
69
|
+
SynAfterHideEvent
|
|
70
|
+
]
|
|
71
|
+
]>;
|
|
72
|
+
/**
|
|
73
|
+
* @summary Badges are used to draw attention and display statuses or counts.
|
|
74
|
+
* @documentation https://synergy.style/components/badge
|
|
75
|
+
* @status stable
|
|
76
|
+
* @since 2.0
|
|
77
|
+
*
|
|
78
|
+
* @slot - The badge's content.
|
|
79
|
+
*
|
|
80
|
+
* @csspart base - The component's base wrapper.
|
|
81
|
+
*/ export type SynBadgeJSXElement = SynCustomElement<SynBadge, []>;
|
|
82
|
+
/**
|
|
83
|
+
* @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
|
84
|
+
* @documentation https://synergy.style/components/breadcrumb
|
|
85
|
+
* @status stable
|
|
86
|
+
* @since 2.0
|
|
87
|
+
*
|
|
88
|
+
* @slot - One or more breadcrumb items to display.
|
|
89
|
+
* @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
|
|
90
|
+
*
|
|
91
|
+
* @dependency syn-icon
|
|
92
|
+
*
|
|
93
|
+
* @csspart base - The component's base wrapper.
|
|
94
|
+
*/ export type SynBreadcrumbJSXElement = SynCustomElement<SynBreadcrumb, []>;
|
|
95
|
+
/**
|
|
96
|
+
* @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
|
|
97
|
+
* @documentation https://synergy.style/components/breadcrumb-item
|
|
98
|
+
* @status stable
|
|
99
|
+
* @since 2.0
|
|
100
|
+
*
|
|
101
|
+
* @slot - The breadcrumb item's label.
|
|
102
|
+
* @slot prefix - An optional prefix, usually an icon or icon button.
|
|
103
|
+
* @slot suffix - An optional suffix, usually an icon or icon button.
|
|
104
|
+
* @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
|
|
105
|
+
* you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.
|
|
106
|
+
*
|
|
107
|
+
* @csspart base - The component's base wrapper.
|
|
108
|
+
* @csspart label - The breadcrumb item's label.
|
|
109
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
110
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
111
|
+
* @csspart separator - The container that wraps the separator.
|
|
112
|
+
*/ export type SynBreadcrumbItemJSXElement = SynCustomElement<SynBreadcrumbItem, [
|
|
113
|
+
]>;
|
|
114
|
+
/**
|
|
115
|
+
* @summary Buttons represent actions that are available to the user.
|
|
116
|
+
* @documentation https://synergy.style/components/button
|
|
117
|
+
* @status stable
|
|
118
|
+
* @since 2.0
|
|
119
|
+
*
|
|
120
|
+
* @dependency syn-icon
|
|
121
|
+
* @dependency syn-spinner
|
|
122
|
+
*
|
|
123
|
+
* @event syn-blur - Emitted when the button loses focus.
|
|
124
|
+
* @event syn-focus - Emitted when the button gains focus.
|
|
125
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
126
|
+
*
|
|
127
|
+
* @slot - The button's label.
|
|
128
|
+
* @slot prefix - A presentational prefix icon or similar element.
|
|
129
|
+
* @slot suffix - A presentational suffix icon or similar element.
|
|
130
|
+
*
|
|
131
|
+
* @csspart base - The component's base wrapper.
|
|
132
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
133
|
+
* @csspart label - The button's label.
|
|
134
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
135
|
+
* @csspart caret - The button's caret icon, an `<syn-icon>` element.
|
|
136
|
+
* @csspart spinner - The spinner that shows when the button is in the loading state.
|
|
137
|
+
*/ export type SynButtonJSXElement = SynCustomElement<SynButton, [
|
|
138
|
+
[
|
|
139
|
+
'syn-blur',
|
|
140
|
+
SynBlurEvent
|
|
141
|
+
],
|
|
142
|
+
[
|
|
143
|
+
'syn-focus',
|
|
144
|
+
SynFocusEvent
|
|
145
|
+
],
|
|
146
|
+
[
|
|
147
|
+
'syn-invalid',
|
|
148
|
+
SynInvalidEvent
|
|
149
|
+
]
|
|
150
|
+
]>;
|
|
151
|
+
/**
|
|
152
|
+
* @summary Button groups can be used to group related buttons into sections.
|
|
153
|
+
* @documentation https://synergy.style/components/button-group
|
|
154
|
+
* @status stable
|
|
155
|
+
* @since 2.0
|
|
156
|
+
*
|
|
157
|
+
* @slot - One or more `<syn-button>` elements to display in the button group.
|
|
158
|
+
*
|
|
159
|
+
* @csspart base - The component's base wrapper.
|
|
160
|
+
*/ export type SynButtonGroupJSXElement = SynCustomElement<SynButtonGroup, []>;
|
|
161
|
+
/**
|
|
162
|
+
* @summary Cards can be used to group related subjects in a container.
|
|
163
|
+
* @documentation https://synergy.style/components/card
|
|
164
|
+
* @status stable
|
|
165
|
+
* @since 2.0
|
|
166
|
+
*
|
|
167
|
+
* @slot - The card's main content.
|
|
168
|
+
* @slot header - An optional header for the card.
|
|
169
|
+
* @slot footer - An optional footer for the card.
|
|
170
|
+
* @slot image - An optional image to render at the start of the card.
|
|
171
|
+
*
|
|
172
|
+
* @csspart base - The component's base wrapper.
|
|
173
|
+
* @csspart image - The container that wraps the card's image.
|
|
174
|
+
* @csspart header - The container that wraps the card's header.
|
|
175
|
+
* @csspart body - The container that wraps the card's main content.
|
|
176
|
+
* @csspart footer - The container that wraps the card's footer.
|
|
177
|
+
*
|
|
178
|
+
* @cssproperty --border-color - The card's border color, including borders that occur inside the card.
|
|
179
|
+
* @cssproperty --border-radius - The border radius for the card's edges.
|
|
180
|
+
* @cssproperty --border-width - The width of the card's borders.
|
|
181
|
+
* @cssproperty --padding - The padding to use for the card's sections.
|
|
182
|
+
*/ export type SynCardJSXElement = SynCustomElement<SynCard, []>;
|
|
183
|
+
/**
|
|
184
|
+
* @summary Checkboxes allow the user to toggle an option on or off.
|
|
185
|
+
* @documentation https://synergy.style/components/checkbox
|
|
186
|
+
* @status stable
|
|
187
|
+
* @since 2.0
|
|
188
|
+
*
|
|
189
|
+
* @dependency syn-icon
|
|
190
|
+
*
|
|
191
|
+
* @slot - The checkbox's label.
|
|
192
|
+
* @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
|
|
193
|
+
*
|
|
194
|
+
* @event syn-blur - Emitted when the checkbox loses focus.
|
|
195
|
+
* @event syn-change - Emitted when the checked state changes.
|
|
196
|
+
* @event syn-focus - Emitted when the checkbox gains focus.
|
|
197
|
+
* @event syn-input - Emitted when the checkbox receives input.
|
|
198
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
199
|
+
*
|
|
200
|
+
* @csspart base - The component's base wrapper.
|
|
201
|
+
* @csspart control - The square container that wraps the checkbox's checked state.
|
|
202
|
+
* @csspart control--checked - Matches the control part when the checkbox is checked.
|
|
203
|
+
* @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
|
|
204
|
+
* @csspart checked-icon - The checked icon, an `<syn-icon>` element.
|
|
205
|
+
* @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.
|
|
206
|
+
* @csspart label - The container that wraps the checkbox's label.
|
|
207
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
208
|
+
*/ export type SynCheckboxJSXElement = SynCustomElement<SynCheckbox, [
|
|
209
|
+
[
|
|
210
|
+
'syn-blur',
|
|
211
|
+
SynBlurEvent
|
|
212
|
+
],
|
|
213
|
+
[
|
|
214
|
+
'syn-change',
|
|
215
|
+
SynChangeEvent
|
|
216
|
+
],
|
|
217
|
+
[
|
|
218
|
+
'syn-focus',
|
|
219
|
+
SynFocusEvent
|
|
220
|
+
],
|
|
221
|
+
[
|
|
222
|
+
'syn-input',
|
|
223
|
+
SynInputEvent
|
|
224
|
+
],
|
|
225
|
+
[
|
|
226
|
+
'syn-invalid',
|
|
227
|
+
SynInvalidEvent
|
|
228
|
+
]
|
|
229
|
+
]>;
|
|
230
|
+
/**
|
|
231
|
+
* @summary Comboboxes allow you to choose items from a menu of predefined options.
|
|
232
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
|
|
233
|
+
* @status stable
|
|
234
|
+
*
|
|
235
|
+
* @dependency syn-icon
|
|
236
|
+
* @dependency syn-popup
|
|
237
|
+
*
|
|
238
|
+
* @slot - The listbox options. Must be `<syn-option>` elements.
|
|
239
|
+
* You can use `<syn-optgroup>`'s to group items visually.
|
|
240
|
+
* @slot label - The combobox's label. Alternatively, you can use the `label` attribute.
|
|
241
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
|
|
242
|
+
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
|
|
243
|
+
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
244
|
+
* @slot expand-icon - The icon to show when the control is expanded and collapsed.
|
|
245
|
+
* Rotates on open and close.
|
|
246
|
+
* @slot help-text - Text that describes how to use the combobox.
|
|
247
|
+
* Alternatively, you can use the `help-text` attribute.
|
|
248
|
+
*
|
|
249
|
+
* @event syn-change - Emitted when the control's value changes.
|
|
250
|
+
* @event syn-clear - Emitted when the control's value is cleared.
|
|
251
|
+
* @event syn-input - Emitted when the control receives input.
|
|
252
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
253
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
254
|
+
* @event syn-show - Emitted when the combobox's menu opens.
|
|
255
|
+
* @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.
|
|
256
|
+
* @event syn-hide - Emitted when the combobox's menu closes.
|
|
257
|
+
* @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.
|
|
258
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity
|
|
259
|
+
* and its constraints aren't satisfied.
|
|
260
|
+
* @event syn-error - Emitted when the combobox menu fails to open.
|
|
261
|
+
*
|
|
262
|
+
* @csspart form-control - The form control that wraps the label, combobox, and help text.
|
|
263
|
+
* @csspart form-control-label - The label's wrapper.
|
|
264
|
+
* @csspart form-control-input - The combobox's wrapper.
|
|
265
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
266
|
+
* @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
|
|
267
|
+
* @csspart prefix - The container that wraps the prefix slot.
|
|
268
|
+
* @csspart suffix - The container that wraps the suffix slot.
|
|
269
|
+
* @csspart display-input - The element that displays the selected option's label,
|
|
270
|
+
* an `<input>` element.
|
|
271
|
+
* @csspart listbox - The listbox container where the options are slotted
|
|
272
|
+
* and the filtered options list exists.
|
|
273
|
+
* @csspart filtered-listbox - The container that wraps the filtered options.
|
|
274
|
+
* @csspart clear-button - The clear button.
|
|
275
|
+
* @csspart expand-icon - The container that wraps the expand icon.
|
|
276
|
+
*
|
|
277
|
+
* @animation combobox.show - The animation to use when showing the combobox.
|
|
278
|
+
* @animation combobox.hide - The animation to use when hiding the combobox.
|
|
279
|
+
*/ export type SynComboboxJSXElement = SynCustomElement<SynCombobox, [
|
|
280
|
+
[
|
|
281
|
+
'syn-change',
|
|
282
|
+
SynChangeEvent
|
|
283
|
+
],
|
|
284
|
+
[
|
|
285
|
+
'syn-clear',
|
|
286
|
+
SynClearEvent
|
|
287
|
+
],
|
|
288
|
+
[
|
|
289
|
+
'syn-input',
|
|
290
|
+
SynInputEvent
|
|
291
|
+
],
|
|
292
|
+
[
|
|
293
|
+
'syn-focus',
|
|
294
|
+
SynFocusEvent
|
|
295
|
+
],
|
|
296
|
+
[
|
|
297
|
+
'syn-blur',
|
|
298
|
+
SynBlurEvent
|
|
299
|
+
],
|
|
300
|
+
[
|
|
301
|
+
'syn-show',
|
|
302
|
+
SynShowEvent
|
|
303
|
+
],
|
|
304
|
+
[
|
|
305
|
+
'syn-after-show',
|
|
306
|
+
SynAfterShowEvent
|
|
307
|
+
],
|
|
308
|
+
[
|
|
309
|
+
'syn-hide',
|
|
310
|
+
SynHideEvent
|
|
311
|
+
],
|
|
312
|
+
[
|
|
313
|
+
'syn-after-hide',
|
|
314
|
+
SynAfterHideEvent
|
|
315
|
+
],
|
|
316
|
+
[
|
|
317
|
+
'syn-invalid',
|
|
318
|
+
SynInvalidEvent
|
|
319
|
+
],
|
|
320
|
+
[
|
|
321
|
+
'syn-error',
|
|
322
|
+
SynErrorEvent
|
|
323
|
+
]
|
|
324
|
+
]>;
|
|
325
|
+
/**
|
|
326
|
+
* @summary Details show a brief summary and expand to show additional content.
|
|
327
|
+
* @documentation https://synergy.style/components/details
|
|
328
|
+
* @status stable
|
|
329
|
+
* @since 2.0
|
|
330
|
+
*
|
|
331
|
+
* @dependency syn-icon
|
|
332
|
+
*
|
|
333
|
+
* @slot - The details' main content.
|
|
334
|
+
* @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
|
|
335
|
+
* @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.
|
|
336
|
+
* @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.
|
|
337
|
+
*
|
|
338
|
+
* @event syn-show - Emitted when the details opens.
|
|
339
|
+
* @event syn-after-show - Emitted after the details opens and all animations are complete.
|
|
340
|
+
* @event syn-hide - Emitted when the details closes.
|
|
341
|
+
* @event syn-after-hide - Emitted after the details closes and all animations are complete.
|
|
342
|
+
*
|
|
343
|
+
* @csspart base - The component's base wrapper.
|
|
344
|
+
* @csspart header - The header that wraps both the summary and the expand/collapse icon.
|
|
345
|
+
* @csspart summary - The container that wraps the summary.
|
|
346
|
+
* @csspart summary-icon - The container that wraps the expand/collapse icons.
|
|
347
|
+
* @csspart content - The details content.
|
|
348
|
+
*
|
|
349
|
+
* @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
|
|
350
|
+
* @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
|
|
351
|
+
*/ export type SynDetailsJSXElement = SynCustomElement<SynDetails, [
|
|
352
|
+
[
|
|
353
|
+
'syn-show',
|
|
354
|
+
SynShowEvent
|
|
355
|
+
],
|
|
356
|
+
[
|
|
357
|
+
'syn-after-show',
|
|
358
|
+
SynAfterShowEvent
|
|
359
|
+
],
|
|
360
|
+
[
|
|
361
|
+
'syn-hide',
|
|
362
|
+
SynHideEvent
|
|
363
|
+
],
|
|
364
|
+
[
|
|
365
|
+
'syn-after-hide',
|
|
366
|
+
SynAfterHideEvent
|
|
367
|
+
]
|
|
368
|
+
]>;
|
|
369
|
+
/**
|
|
370
|
+
* @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
|
|
371
|
+
* @documentation https://synergy.style/components/dialog
|
|
372
|
+
* @status stable
|
|
373
|
+
* @since 2.0
|
|
374
|
+
*
|
|
375
|
+
* @dependency syn-icon-button
|
|
376
|
+
*
|
|
377
|
+
* @slot - The dialog's main content.
|
|
378
|
+
* @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
|
|
379
|
+
* @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
|
|
380
|
+
* @slot footer - The dialog's footer, usually one or more buttons representing various options.
|
|
381
|
+
*
|
|
382
|
+
* @event syn-show - Emitted when the dialog opens.
|
|
383
|
+
* @event syn-after-show - Emitted after the dialog opens and all animations are complete.
|
|
384
|
+
* @event syn-hide - Emitted when the dialog closes.
|
|
385
|
+
* @event syn-after-hide - Emitted after the dialog closes and all animations are complete.
|
|
386
|
+
* @event syn-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
|
|
387
|
+
* `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
|
|
388
|
+
* @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
|
|
389
|
+
* close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
|
|
390
|
+
* `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
|
|
391
|
+
* destructive behavior such as data loss.
|
|
392
|
+
*
|
|
393
|
+
* @csspart base - The component's base wrapper.
|
|
394
|
+
* @csspart overlay - The overlay that covers the screen behind the dialog.
|
|
395
|
+
* @csspart panel - The dialog's panel (where the dialog and its content are rendered).
|
|
396
|
+
* @csspart header - The dialog's header. This element wraps the title and header actions.
|
|
397
|
+
* @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
|
|
398
|
+
* @csspart title - The dialog's title.
|
|
399
|
+
* @csspart close-button - The close button, an `<syn-icon-button>`.
|
|
400
|
+
* @csspart close-button__base - The close button's exported `base` part.
|
|
401
|
+
* @csspart body - The dialog's body.
|
|
402
|
+
* @csspart footer - The dialog's footer.
|
|
403
|
+
*
|
|
404
|
+
* @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
|
|
405
|
+
* @cssproperty --header-spacing - The amount of padding to use for the header.
|
|
406
|
+
* @cssproperty --body-spacing - The amount of padding to use for the body.
|
|
407
|
+
* @cssproperty --footer-spacing - The amount of padding to use for the footer.
|
|
408
|
+
*
|
|
409
|
+
* @animation dialog.show - The animation to use when showing the dialog.
|
|
410
|
+
* @animation dialog.hide - The animation to use when hiding the dialog.
|
|
411
|
+
* @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
|
|
412
|
+
* @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
|
|
413
|
+
* @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
|
|
414
|
+
*
|
|
415
|
+
* @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
|
|
416
|
+
* trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
|
|
417
|
+
* the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
|
|
418
|
+
*/ export type SynDialogJSXElement = SynCustomElement<SynDialog, [
|
|
419
|
+
[
|
|
420
|
+
'syn-show',
|
|
421
|
+
SynShowEvent
|
|
422
|
+
],
|
|
423
|
+
[
|
|
424
|
+
'syn-after-show',
|
|
425
|
+
SynAfterShowEvent
|
|
426
|
+
],
|
|
427
|
+
[
|
|
428
|
+
'syn-hide',
|
|
429
|
+
SynHideEvent
|
|
430
|
+
],
|
|
431
|
+
[
|
|
432
|
+
'syn-after-hide',
|
|
433
|
+
SynAfterHideEvent
|
|
434
|
+
],
|
|
435
|
+
[
|
|
436
|
+
'syn-initial-focus',
|
|
437
|
+
SynInitialFocusEvent
|
|
438
|
+
],
|
|
439
|
+
[
|
|
440
|
+
'syn-request-close',
|
|
441
|
+
SynRequestCloseEvent
|
|
442
|
+
]
|
|
443
|
+
]>;
|
|
444
|
+
/**
|
|
445
|
+
* @summary Dividers are used to visually separate or group elements.
|
|
446
|
+
* @documentation https://synergy.style/components/divider
|
|
447
|
+
* @status stable
|
|
448
|
+
* @since 2.0
|
|
449
|
+
*
|
|
450
|
+
* @cssproperty --color - The color of the divider.
|
|
451
|
+
* @cssproperty --width - The width of the divider.
|
|
452
|
+
* @cssproperty --spacing - The spacing of the divider.
|
|
453
|
+
*/ export type SynDividerJSXElement = SynCustomElement<SynDivider, []>;
|
|
454
|
+
/**
|
|
455
|
+
* @summary Drawers slide in from a container to expose additional options and information.
|
|
456
|
+
* @documentation https://synergy.style/components/drawer
|
|
457
|
+
* @status stable
|
|
458
|
+
* @since 2.0
|
|
459
|
+
*
|
|
460
|
+
* @dependency syn-icon-button
|
|
461
|
+
*
|
|
462
|
+
* @slot - The drawer's main content.
|
|
463
|
+
* @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
|
|
464
|
+
* @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
|
|
465
|
+
* @slot footer - The drawer's footer, usually one or more buttons representing various options.
|
|
466
|
+
*
|
|
467
|
+
* @event syn-show - Emitted when the drawer opens.
|
|
468
|
+
* @event syn-after-show - Emitted after the drawer opens and all animations are complete.
|
|
469
|
+
* @event syn-hide - Emitted when the drawer closes.
|
|
470
|
+
* @event syn-after-hide - Emitted after the drawer closes and all animations are complete.
|
|
471
|
+
* @event syn-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling
|
|
472
|
+
* `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
|
|
473
|
+
* @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
|
|
474
|
+
* close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
|
|
475
|
+
* `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
|
|
476
|
+
* destructive behavior such as data loss.
|
|
477
|
+
*
|
|
478
|
+
* @csspart base - The component's base wrapper.
|
|
479
|
+
* @csspart overlay - The overlay that covers the screen behind the drawer.
|
|
480
|
+
* @csspart panel - The drawer's panel (where the drawer and its content are rendered).
|
|
481
|
+
* @csspart header - The drawer's header. This element wraps the title and header actions.
|
|
482
|
+
* @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
|
|
483
|
+
* @csspart title - The drawer's title.
|
|
484
|
+
* @csspart close-button - The close button, an `<syn-icon-button>`.
|
|
485
|
+
* @csspart close-button__base - The close button's exported `base` part.
|
|
486
|
+
* @csspart body - The drawer's body.
|
|
487
|
+
* @csspart footer - The drawer's footer.
|
|
488
|
+
*
|
|
489
|
+
* @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
|
|
490
|
+
* depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
|
|
491
|
+
* @cssproperty --header-spacing - The amount of padding to use for the header.
|
|
492
|
+
* @cssproperty --body-spacing - The amount of padding to use for the body.
|
|
493
|
+
* @cssproperty --footer-spacing - The amount of padding to use for the footer.
|
|
494
|
+
*
|
|
495
|
+
* @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.
|
|
496
|
+
* @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.
|
|
497
|
+
* @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.
|
|
498
|
+
* @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.
|
|
499
|
+
* @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.
|
|
500
|
+
* @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.
|
|
501
|
+
* @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.
|
|
502
|
+
* @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.
|
|
503
|
+
* @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.
|
|
504
|
+
* @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.
|
|
505
|
+
* @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.
|
|
506
|
+
*
|
|
507
|
+
* @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
|
|
508
|
+
* trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
|
|
509
|
+
* the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
|
|
510
|
+
*/ export type SynDrawerJSXElement = SynCustomElement<SynDrawer, [
|
|
511
|
+
[
|
|
512
|
+
'syn-show',
|
|
513
|
+
SynShowEvent
|
|
514
|
+
],
|
|
515
|
+
[
|
|
516
|
+
'syn-after-show',
|
|
517
|
+
SynAfterShowEvent
|
|
518
|
+
],
|
|
519
|
+
[
|
|
520
|
+
'syn-hide',
|
|
521
|
+
SynHideEvent
|
|
522
|
+
],
|
|
523
|
+
[
|
|
524
|
+
'syn-after-hide',
|
|
525
|
+
SynAfterHideEvent
|
|
526
|
+
],
|
|
527
|
+
[
|
|
528
|
+
'syn-initial-focus',
|
|
529
|
+
SynInitialFocusEvent
|
|
530
|
+
],
|
|
531
|
+
[
|
|
532
|
+
'syn-request-close',
|
|
533
|
+
SynRequestCloseEvent
|
|
534
|
+
]
|
|
535
|
+
]>;
|
|
536
|
+
/**
|
|
537
|
+
* @summary Dropdowns expose additional content that "drops down" in a panel.
|
|
538
|
+
* @documentation https://synergy.style/components/dropdown
|
|
539
|
+
* @status stable
|
|
540
|
+
* @since 2.0
|
|
541
|
+
*
|
|
542
|
+
* @dependency syn-popup
|
|
543
|
+
*
|
|
544
|
+
* @slot - The dropdown's main content.
|
|
545
|
+
* @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
|
|
546
|
+
*
|
|
547
|
+
* @event syn-show - Emitted when the dropdown opens.
|
|
548
|
+
* @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
|
|
549
|
+
* @event syn-hide - Emitted when the dropdown closes.
|
|
550
|
+
* @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
|
|
551
|
+
*
|
|
552
|
+
* @csspart base - The component's base wrapper, an `<syn-popup>` element.
|
|
553
|
+
* @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
|
|
554
|
+
* @csspart trigger - The container that wraps the trigger.
|
|
555
|
+
* @csspart panel - The panel that gets shown when the dropdown is open.
|
|
556
|
+
*
|
|
557
|
+
* @animation dropdown.show - The animation to use when showing the dropdown.
|
|
558
|
+
* @animation dropdown.hide - The animation to use when hiding the dropdown.
|
|
559
|
+
*/ export type SynDropdownJSXElement = SynCustomElement<SynDropdown, [
|
|
560
|
+
[
|
|
561
|
+
'syn-show',
|
|
562
|
+
SynShowEvent
|
|
563
|
+
],
|
|
564
|
+
[
|
|
565
|
+
'syn-after-show',
|
|
566
|
+
SynAfterShowEvent
|
|
567
|
+
],
|
|
568
|
+
[
|
|
569
|
+
'syn-hide',
|
|
570
|
+
SynHideEvent
|
|
571
|
+
],
|
|
572
|
+
[
|
|
573
|
+
'syn-after-hide',
|
|
574
|
+
SynAfterHideEvent
|
|
575
|
+
]
|
|
576
|
+
]>;
|
|
577
|
+
/**
|
|
578
|
+
* @summary File controls allow selecting an arbitrary number of files for uploading.
|
|
579
|
+
* @status stable
|
|
580
|
+
*
|
|
581
|
+
* @dependency syn-button
|
|
582
|
+
* @dependency syn-icon
|
|
583
|
+
*
|
|
584
|
+
* @slot label - The file control's label. Alternatively, you can use the `label` attribute.
|
|
585
|
+
* @slot help-text - Text that describes how to use the file control.
|
|
586
|
+
* Alternatively, you can use the `help-text` attribute.
|
|
587
|
+
* @slot droparea-icon - Optional droparea icon to use instead of the default.
|
|
588
|
+
* Works best with `<syn-icon>`.
|
|
589
|
+
* @slot trigger - Optional content to be used as trigger instead of the default content.
|
|
590
|
+
* Opening the file dialog on click and as well as drag and drop will work for this content.
|
|
591
|
+
* Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,
|
|
592
|
+
* *hide-value*. Also if using the disabled attribute, the disabled styling will not be
|
|
593
|
+
* applied and must be taken care of yourself.
|
|
594
|
+
*
|
|
595
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
596
|
+
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
|
|
597
|
+
* @event syn-error - Emitted when multiple files are selected via drag and drop, without
|
|
598
|
+
* the `multiple` property being set.
|
|
599
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
600
|
+
* @event syn-input - Emitted when the control receives input.
|
|
601
|
+
*
|
|
602
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
603
|
+
* @csspart form-control-label - The label's wrapper.
|
|
604
|
+
* @csspart form-control-input - The input's wrapper.
|
|
605
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
606
|
+
* @csspart button-wrapper - The wrapper around the button and text value.
|
|
607
|
+
* @csspart button - The syn-button acting as a file input.
|
|
608
|
+
* @csspart button__base - The syn-button's exported `base` part.
|
|
609
|
+
* @csspart value - The chosen files or placeholder text for the file input.
|
|
610
|
+
* @csspart droparea - The element wrapping the drop zone.
|
|
611
|
+
* @csspart droparea-background - The background of the drop zone.
|
|
612
|
+
* @csspart droparea-icon - The container that wraps the icon for the drop zone.
|
|
613
|
+
* @csspart droparea-value - The text for the drop zone.
|
|
614
|
+
* @csspart trigger - The container that wraps the trigger.
|
|
615
|
+
*
|
|
616
|
+
* @animation file.iconDrop - The animation to use for the file icon
|
|
617
|
+
* when a file is dropped
|
|
618
|
+
* @animation file.text.disappear - The disappear animation to use for the file placeholder text
|
|
619
|
+
* when a file is dropped
|
|
620
|
+
* @animation file.text.appear - The appear animation to use for the file placeholder text
|
|
621
|
+
* when a file is dropped
|
|
622
|
+
*/ export type SynFileJSXElement = SynCustomElement<SynFile, [
|
|
623
|
+
[
|
|
624
|
+
'syn-blur',
|
|
625
|
+
SynBlurEvent
|
|
626
|
+
],
|
|
627
|
+
[
|
|
628
|
+
'syn-change',
|
|
629
|
+
SynChangeEvent
|
|
630
|
+
],
|
|
631
|
+
[
|
|
632
|
+
'syn-error',
|
|
633
|
+
SynErrorEvent
|
|
634
|
+
],
|
|
635
|
+
[
|
|
636
|
+
'syn-focus',
|
|
637
|
+
SynFocusEvent
|
|
638
|
+
],
|
|
639
|
+
[
|
|
640
|
+
'syn-input',
|
|
641
|
+
SynInputEvent
|
|
642
|
+
]
|
|
643
|
+
]>;
|
|
644
|
+
/**
|
|
645
|
+
* @summary The <syn-header /> element provides a generic application header
|
|
646
|
+
* that can be used to add applications name, toolbar and primary navigation.
|
|
647
|
+
*
|
|
648
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs
|
|
649
|
+
* @status stable
|
|
650
|
+
* @since 1.10.0
|
|
651
|
+
*
|
|
652
|
+
* @slot label - The label for the header
|
|
653
|
+
* @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided
|
|
654
|
+
* @slot meta-navigation - The meta-navigation is used to add various application toolbar icons
|
|
655
|
+
* Best used with `<syn-icon-button />` and `<syn-drop-down />`
|
|
656
|
+
* @slot navigation - This slot can be used to add an optional horizontal navigation
|
|
657
|
+
* @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.
|
|
658
|
+
* The default close icon is a 'x'.
|
|
659
|
+
* @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.
|
|
660
|
+
* The default open icon is a burger menu.
|
|
661
|
+
*
|
|
662
|
+
* @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed
|
|
663
|
+
* @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden
|
|
664
|
+
* @event syn-burger-menu-open - Emitted when the burger menu is toggled to open
|
|
665
|
+
*
|
|
666
|
+
* @csspart base - The component's base wrapper
|
|
667
|
+
* @csspart content - The wrapper most content items reside
|
|
668
|
+
* @csspart logo - The wrapper the application logo resides in
|
|
669
|
+
* @csspart label - The element wrapping the application name
|
|
670
|
+
* @csspart meta-navigation - The Item wrapping the optional application menu
|
|
671
|
+
* @csspart navigation - The wrapper that is holding the optional top navigation section
|
|
672
|
+
* @csspart burger-menu-toggle-button - The button that toggles the burger menu
|
|
673
|
+
*/ export type SynHeaderJSXElement = SynCustomElement<SynHeader, [
|
|
674
|
+
[
|
|
675
|
+
'syn-burger-menu-closed',
|
|
676
|
+
SynBurgerMenuClosedEvent
|
|
677
|
+
],
|
|
678
|
+
[
|
|
679
|
+
'syn-burger-menu-hidden',
|
|
680
|
+
SynBurgerMenuHiddenEvent
|
|
681
|
+
],
|
|
682
|
+
[
|
|
683
|
+
'syn-burger-menu-open',
|
|
684
|
+
SynBurgerMenuOpenEvent
|
|
685
|
+
]
|
|
686
|
+
]>;
|
|
687
|
+
/**
|
|
688
|
+
* @summary Icons are symbols that can be used to represent various options within an application.
|
|
689
|
+
* @documentation https://synergy.style/components/icon
|
|
690
|
+
* @status stable
|
|
691
|
+
* @since 2.0
|
|
692
|
+
*
|
|
693
|
+
* @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
|
|
694
|
+
* @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
|
|
695
|
+
*
|
|
696
|
+
* @csspart svg - The internal SVG element.
|
|
697
|
+
* @csspart use - The <use> element generated when using `spriteSheet: true`
|
|
698
|
+
*/ export type SynIconJSXElement = SynCustomElement<SynIcon, [
|
|
699
|
+
['syn-load', SynLoadEvent],
|
|
700
|
+
['syn-error', SynErrorEvent]
|
|
701
|
+
]>;
|
|
702
|
+
/**
|
|
703
|
+
* @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
|
|
704
|
+
* @documentation https://synergy.style/components/icon-button
|
|
705
|
+
* @status stable
|
|
706
|
+
* @since 2.0
|
|
707
|
+
*
|
|
708
|
+
* @dependency syn-icon
|
|
709
|
+
*
|
|
710
|
+
* @event syn-blur - Emitted when the icon button loses focus.
|
|
711
|
+
* @event syn-focus - Emitted when the icon button gains focus.
|
|
712
|
+
*
|
|
713
|
+
* @csspart base - The component's base wrapper.
|
|
714
|
+
*/ export type SynIconButtonJSXElement = SynCustomElement<SynIconButton, [
|
|
715
|
+
['syn-blur', SynBlurEvent],
|
|
716
|
+
['syn-focus', SynFocusEvent]
|
|
717
|
+
]>;
|
|
718
|
+
/**
|
|
719
|
+
* @summary Inputs collect data from the user.
|
|
720
|
+
* @documentation https://synergy.style/components/input
|
|
721
|
+
* @status stable
|
|
722
|
+
* @since 2.0
|
|
723
|
+
*
|
|
724
|
+
* @dependency syn-icon
|
|
725
|
+
* @dependency syn-divider
|
|
726
|
+
*
|
|
727
|
+
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
|
728
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the input.
|
|
729
|
+
* @slot suffix - Used to append a presentational icon or similar element to the input.
|
|
730
|
+
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
731
|
+
* @slot show-password-icon - An icon to use in lieu of the default show password icon.
|
|
732
|
+
* @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
|
|
733
|
+
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
734
|
+
* @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.
|
|
735
|
+
* @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.
|
|
736
|
+
*
|
|
737
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
738
|
+
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
|
|
739
|
+
* @event syn-clear - Emitted when the clear button is activated.
|
|
740
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
741
|
+
* @event syn-input - Emitted when the control receives input.
|
|
742
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
743
|
+
*
|
|
744
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
745
|
+
* @csspart form-control-label - The label's wrapper.
|
|
746
|
+
* @csspart form-control-input - The input's wrapper.
|
|
747
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
748
|
+
* @csspart base - The component's base wrapper.
|
|
749
|
+
* @csspart input - The internal `<input>` control.
|
|
750
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
751
|
+
* @csspart clear-button - The clear button.
|
|
752
|
+
* @csspart password-toggle-button - The password toggle button.
|
|
753
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
754
|
+
* @csspart stepper - The container that wraps the number stepper.
|
|
755
|
+
* @csspart decrement-number-stepper - The decrement number stepper button.
|
|
756
|
+
* @csspart increment-number-stepper - The increment number stepper button.
|
|
757
|
+
* @csspart divider - The divider between the increment and decrement number stepper buttons.
|
|
758
|
+
*/ export type SynInputJSXElement = SynCustomElement<SynInput, [
|
|
759
|
+
[
|
|
760
|
+
'syn-blur',
|
|
761
|
+
SynBlurEvent
|
|
762
|
+
],
|
|
763
|
+
[
|
|
764
|
+
'syn-change',
|
|
765
|
+
SynChangeEvent
|
|
766
|
+
],
|
|
767
|
+
[
|
|
768
|
+
'syn-clear',
|
|
769
|
+
SynClearEvent
|
|
770
|
+
],
|
|
771
|
+
[
|
|
772
|
+
'syn-focus',
|
|
773
|
+
SynFocusEvent
|
|
774
|
+
],
|
|
775
|
+
[
|
|
776
|
+
'syn-input',
|
|
777
|
+
SynInputEvent
|
|
778
|
+
],
|
|
779
|
+
[
|
|
780
|
+
'syn-invalid',
|
|
781
|
+
SynInvalidEvent
|
|
782
|
+
]
|
|
783
|
+
]>;
|
|
784
|
+
/**
|
|
785
|
+
* @summary Menus provide a list of options for the user to choose from.
|
|
786
|
+
* @documentation https://synergy.style/components/menu
|
|
787
|
+
* @status stable
|
|
788
|
+
* @since 2.0
|
|
789
|
+
*
|
|
790
|
+
* @slot - The menu's content, including menu items, menu labels, and dividers.
|
|
791
|
+
*
|
|
792
|
+
* @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.
|
|
793
|
+
*/ export type SynMenuJSXElement = SynCustomElement<SynMenu, [
|
|
794
|
+
['syn-select', SynSelectEvent]
|
|
795
|
+
]>;
|
|
796
|
+
/**
|
|
797
|
+
* @summary Menu items provide options for the user to pick from in a menu.
|
|
798
|
+
* @documentation https://synergy.style/components/menu-item
|
|
799
|
+
* @status stable
|
|
800
|
+
* @since 2.0
|
|
801
|
+
*
|
|
802
|
+
* @dependency syn-icon
|
|
803
|
+
* @dependency syn-popup
|
|
804
|
+
* @dependency syn-spinner
|
|
805
|
+
*
|
|
806
|
+
* @slot - The menu item's label.
|
|
807
|
+
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
|
808
|
+
* @slot suffix - Used to append an icon or similar element to the menu item.
|
|
809
|
+
* @slot submenu - Used to denote a nested menu.
|
|
810
|
+
*
|
|
811
|
+
* @csspart base - The component's base wrapper.
|
|
812
|
+
* @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
|
|
813
|
+
* @csspart prefix - The prefix container.
|
|
814
|
+
* @csspart label - The menu item label.
|
|
815
|
+
* @csspart suffix - The suffix container.
|
|
816
|
+
* @csspart spinner - The spinner that shows when the menu item is in the loading state.
|
|
817
|
+
* @csspart spinner__base - The spinner's base part.
|
|
818
|
+
* @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
|
|
819
|
+
*
|
|
820
|
+
* @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
|
|
821
|
+
*/ export type SynMenuItemJSXElement = SynCustomElement<SynMenuItem, []>;
|
|
822
|
+
/**
|
|
823
|
+
* @summary Menu labels are used to describe a group of menu items.
|
|
824
|
+
* @documentation https://synergy.style/components/menu-label
|
|
825
|
+
* @status stable
|
|
826
|
+
* @since 2.0
|
|
827
|
+
*
|
|
828
|
+
* @dependency syn-divider
|
|
829
|
+
*
|
|
830
|
+
* @slot - The menu label's content.
|
|
831
|
+
*
|
|
832
|
+
* @csspart base - The component's base wrapper.
|
|
833
|
+
* @csspart divider - The divider that is displayed above the content
|
|
834
|
+
* @csspart label - The label that is displayed below the divider
|
|
835
|
+
*
|
|
836
|
+
* @cssproperty --display-divider - Display property of the divider. Defaults to "block"
|
|
837
|
+
*/ export type SynMenuLabelJSXElement = SynCustomElement<SynMenuLabel, []>;
|
|
838
|
+
/**
|
|
839
|
+
* @summary Flexible button / link component that can be used to quickly build navigations.
|
|
840
|
+
* Takes one of 3 forms:
|
|
841
|
+
* - button (default),
|
|
842
|
+
* - link (overrides button if a 'href' is provided),
|
|
843
|
+
* - or accordion (overrides all other if 'children' slot is defined).
|
|
844
|
+
*
|
|
845
|
+
* @status stable
|
|
846
|
+
* @since 1.14.0
|
|
847
|
+
*
|
|
848
|
+
* @dependency syn-divider
|
|
849
|
+
*
|
|
850
|
+
* @event syn-show - Emitted when the navigation item:
|
|
851
|
+
* - has children,
|
|
852
|
+
* - and is clicked while HTML details are hidden.
|
|
853
|
+
*
|
|
854
|
+
* @event syn-hide - Emitted when the navigation item:
|
|
855
|
+
* - has children,
|
|
856
|
+
* - and is clicked while HTML details are shown.
|
|
857
|
+
*
|
|
858
|
+
* @event syn-blur - Emitted when the button loses focus.
|
|
859
|
+
* @event syn-focus - Emitted when the button gains focus.
|
|
860
|
+
*
|
|
861
|
+
* @slot - The navigation item's label.
|
|
862
|
+
* @slot prefix - A presentational prefix icon or similar element.
|
|
863
|
+
* @slot suffix - A presentational suffix icon or similar element.
|
|
864
|
+
* @slot children - Slot used to provide nested child navigation elements.
|
|
865
|
+
* If provided, details and summary elements will be used.
|
|
866
|
+
* A chevron will be shown on the right side regardless of the chevron property.
|
|
867
|
+
*
|
|
868
|
+
* @csspart base - The component's base wrapper including children.
|
|
869
|
+
* @csspart children - The wrapper that holds the children
|
|
870
|
+
* @csspart content-wrapper - The component's content wrapper.
|
|
871
|
+
* @csspart content - The component's content excluding children.
|
|
872
|
+
* @csspart current-indicator - The indicator used when current is set to true
|
|
873
|
+
* @csspart chevron - The container that wraps the chevron.
|
|
874
|
+
* @csspart details - The details element rendered when there are children available
|
|
875
|
+
* @csspart divider - The components optional top divider.
|
|
876
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
877
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
878
|
+
*
|
|
879
|
+
* @cssproperty --indentation - Numeric value, indicating the level the item is placed at.
|
|
880
|
+
* @cssproperty --indentation-stepping - The amount of pixels each level will indent.
|
|
881
|
+
* @cssproperty --display-children - Display property of the children. Defaults to "contents"
|
|
882
|
+
*/ export type SynNavItemJSXElement = SynCustomElement<SynNavItem, [
|
|
883
|
+
[
|
|
884
|
+
'syn-show',
|
|
885
|
+
SynShowEvent
|
|
886
|
+
],
|
|
887
|
+
[
|
|
888
|
+
'syn-hide',
|
|
889
|
+
SynHideEvent
|
|
890
|
+
],
|
|
891
|
+
[
|
|
892
|
+
'syn-blur',
|
|
893
|
+
SynBlurEvent
|
|
894
|
+
],
|
|
895
|
+
[
|
|
896
|
+
'syn-focus',
|
|
897
|
+
SynFocusEvent
|
|
898
|
+
]
|
|
899
|
+
]>;
|
|
900
|
+
/**
|
|
901
|
+
* @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
|
|
902
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs
|
|
903
|
+
* @status stable
|
|
904
|
+
* @since 1.3.0
|
|
905
|
+
*
|
|
906
|
+
* @dependency syn-divider
|
|
907
|
+
*
|
|
908
|
+
* @slot - The given options. Must be `<syn-option>` elements.
|
|
909
|
+
* @slot prefix - A presentational prefix icon or similar element.
|
|
910
|
+
* @slot label - The label for the optgroup
|
|
911
|
+
* @slot suffix - A presentational suffix icon or similar element.
|
|
912
|
+
*
|
|
913
|
+
* @csspart base - The component's base wrapper.
|
|
914
|
+
* @csspart label-container - The container that wraps prefix, label and base
|
|
915
|
+
* @csspart divider - The divider that is displayed above the content
|
|
916
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
917
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
918
|
+
* @csspart options - The container that wraps the <syn-option> elements.
|
|
919
|
+
*
|
|
920
|
+
* @cssproperty --display-divider - Display property of the divider. Defaults to "block"
|
|
921
|
+
*/ export type SynOptgroupJSXElement = SynCustomElement<SynOptgroup, []>;
|
|
922
|
+
/**
|
|
923
|
+
* @summary Options define the selectable items within various form controls such as [select](/components/select).
|
|
924
|
+
* @documentation https://synergy.style/components/option
|
|
925
|
+
* @status stable
|
|
926
|
+
* @since 2.0
|
|
927
|
+
*
|
|
928
|
+
* @dependency syn-icon
|
|
929
|
+
*
|
|
930
|
+
* @slot - The option's label.
|
|
931
|
+
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
|
932
|
+
* @slot suffix - Used to append an icon or similar element to the menu item.
|
|
933
|
+
*
|
|
934
|
+
* @csspart checked-icon - The checked icon, an `<syn-icon>` element.
|
|
935
|
+
* @csspart base - The component's base wrapper.
|
|
936
|
+
* @csspart label - The option's label.
|
|
937
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
938
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
939
|
+
*/ export type SynOptionJSXElement = SynCustomElement<SynOption, []>;
|
|
940
|
+
/**
|
|
941
|
+
* @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
|
|
942
|
+
* @documentation https://synergy.style/components/popup
|
|
943
|
+
* @status stable
|
|
944
|
+
* @since 2.0
|
|
945
|
+
*
|
|
946
|
+
* @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
|
|
947
|
+
* operations in your listener or consider debouncing it.
|
|
948
|
+
*
|
|
949
|
+
* @slot - The popup's content.
|
|
950
|
+
* @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
|
|
951
|
+
* `anchor` attribute or property instead.
|
|
952
|
+
*
|
|
953
|
+
* @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
|
|
954
|
+
* assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
|
|
955
|
+
* maybe a border or box shadow.
|
|
956
|
+
* @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
|
|
957
|
+
* @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
|
|
958
|
+
*
|
|
959
|
+
* @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
|
|
960
|
+
* attribute is used.
|
|
961
|
+
* @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.
|
|
962
|
+
* @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
|
|
963
|
+
* popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
|
|
964
|
+
* available when using `auto-size`.
|
|
965
|
+
* @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
|
|
966
|
+
* popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
|
|
967
|
+
* available when using `auto-size`.
|
|
968
|
+
*/ export type SynPopupJSXElement = SynCustomElement<SynPopup, [
|
|
969
|
+
['syn-reposition', SynRepositionEvent]
|
|
970
|
+
]>;
|
|
971
|
+
/**
|
|
972
|
+
* @summary The `<syn-prio-nav />` element provides a generic navigation bar
|
|
973
|
+
* that can be used to group multiple navigation items (usually horizontal `<syn-nav-item />`s)
|
|
974
|
+
* together. It will automatically group all items not visible in the viewport into a custom
|
|
975
|
+
* priority menu.
|
|
976
|
+
*
|
|
977
|
+
* @example
|
|
978
|
+
* <syn-prio-nav>
|
|
979
|
+
* <syn-nav-item current horizontal>Item 1</syn-nav-item>
|
|
980
|
+
* <button role="menuitem">Item 2 (custom)</button>
|
|
981
|
+
* <syn-nav-item horizontal>Item 3</syn-nav-item>
|
|
982
|
+
* </syn-prio-nav>
|
|
983
|
+
*
|
|
984
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
|
|
985
|
+
* @status stable
|
|
986
|
+
* @since 1.14.0
|
|
987
|
+
*
|
|
988
|
+
* @dependency syn-dropdown
|
|
989
|
+
* @dependency syn-icon
|
|
990
|
+
* @dependency syn-menu
|
|
991
|
+
* @dependency syn-nav-item
|
|
992
|
+
*
|
|
993
|
+
* @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s
|
|
994
|
+
* or have a role of "menuitem"
|
|
995
|
+
*
|
|
996
|
+
* @csspart base - The component's base wrapper.
|
|
997
|
+
* @csspart priority-menu - The wrapper around the priority menu
|
|
998
|
+
* @csspart priority-menu-nav-item - The navigation item for the priority menu
|
|
999
|
+
* @csspart priority-menu-label - The label for the priority menu
|
|
1000
|
+
* @csspart priority-menu-icon - The icon for the priority menu
|
|
1001
|
+
* @csspart priority-menu-container - The container for the shifted navigation items,
|
|
1002
|
+
* if there is not enough space.
|
|
1003
|
+
*
|
|
1004
|
+
*/ export type SynPrioNavJSXElement = SynCustomElement<SynPrioNav, []>;
|
|
1005
|
+
/**
|
|
1006
|
+
* @summary Progress bars are used to show the status of an ongoing operation.
|
|
1007
|
+
* @documentation https://synergy.style/components/progress-bar
|
|
1008
|
+
* @status stable
|
|
1009
|
+
* @since 2.0
|
|
1010
|
+
*
|
|
1011
|
+
* @slot - A label to show inside the progress indicator.
|
|
1012
|
+
*
|
|
1013
|
+
* @csspart base - The component's base wrapper.
|
|
1014
|
+
* @csspart indicator - The progress bar's indicator.
|
|
1015
|
+
* @csspart label - The progress bar's label.
|
|
1016
|
+
*
|
|
1017
|
+
* @cssproperty --height - The progress bar's height.
|
|
1018
|
+
* @cssproperty --track-color - The color of the track.
|
|
1019
|
+
* @cssproperty --indicator-color - The color of the indicator.
|
|
1020
|
+
* @cssproperty --label-color - The color of the label.
|
|
1021
|
+
* @cssproperty --speed - The speed of the progress bar when in indeterminate state.
|
|
1022
|
+
*/ export type SynProgressBarJSXElement = SynCustomElement<SynProgressBar, []>;
|
|
1023
|
+
/**
|
|
1024
|
+
* @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
|
1025
|
+
* @documentation https://synergy.style/components/progress-ring
|
|
1026
|
+
* @status stable
|
|
1027
|
+
* @since 2.0
|
|
1028
|
+
*
|
|
1029
|
+
* @slot - A label to show inside the ring.
|
|
1030
|
+
*
|
|
1031
|
+
* @csspart base - The component's base wrapper.
|
|
1032
|
+
* @csspart label - The progress ring label.
|
|
1033
|
+
*
|
|
1034
|
+
* @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
|
|
1035
|
+
* @cssproperty --track-width - The width of the track.
|
|
1036
|
+
* @cssproperty --track-color - The color of the track.
|
|
1037
|
+
* @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
|
|
1038
|
+
* @cssproperty --indicator-color - The color of the indicator.
|
|
1039
|
+
* @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
|
|
1040
|
+
*/ export type SynProgressRingJSXElement = SynCustomElement<SynProgressRing, [
|
|
1041
|
+
]>;
|
|
1042
|
+
/**
|
|
1043
|
+
* @summary Radios allow the user to select a single option from a group.
|
|
1044
|
+
* @documentation https://synergy.style/components/radio
|
|
1045
|
+
* @status stable
|
|
1046
|
+
* @since 2.0
|
|
1047
|
+
*
|
|
1048
|
+
* @dependency syn-icon
|
|
1049
|
+
*
|
|
1050
|
+
* @slot - The radio's label.
|
|
1051
|
+
*
|
|
1052
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
1053
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
1054
|
+
*
|
|
1055
|
+
* @csspart base - The component's base wrapper.
|
|
1056
|
+
* @csspart control - The circular container that wraps the radio's checked state.
|
|
1057
|
+
* @csspart control--checked - The radio control when the radio is checked.
|
|
1058
|
+
* @csspart checked-icon - The checked icon, an `<syn-icon>` element.
|
|
1059
|
+
* @csspart label - The container that wraps the radio's label.
|
|
1060
|
+
*/ export type SynRadioJSXElement = SynCustomElement<SynRadio, [
|
|
1061
|
+
['syn-blur', SynBlurEvent],
|
|
1062
|
+
['syn-focus', SynFocusEvent]
|
|
1063
|
+
]>;
|
|
1064
|
+
/**
|
|
1065
|
+
* @summary Radios buttons allow the user to select a single option from a group using a button-like control.
|
|
1066
|
+
* @documentation https://synergy.style/components/radio-button
|
|
1067
|
+
* @status stable
|
|
1068
|
+
* @since 2.0
|
|
1069
|
+
*
|
|
1070
|
+
* @slot - The radio button's label.
|
|
1071
|
+
* @slot prefix - A presentational prefix icon or similar element.
|
|
1072
|
+
* @slot suffix - A presentational suffix icon or similar element.
|
|
1073
|
+
*
|
|
1074
|
+
* @event syn-blur - Emitted when the button loses focus.
|
|
1075
|
+
* @event syn-focus - Emitted when the button gains focus.
|
|
1076
|
+
*
|
|
1077
|
+
* @csspart base - The component's base wrapper.
|
|
1078
|
+
* @csspart button - The internal `<button>` element.
|
|
1079
|
+
* @csspart button--checked - The internal button element when the radio button is checked.
|
|
1080
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
1081
|
+
* @csspart label - The container that wraps the radio button's label.
|
|
1082
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
1083
|
+
*/ export type SynRadioButtonJSXElement = SynCustomElement<SynRadioButton, [
|
|
1084
|
+
['syn-blur', SynBlurEvent],
|
|
1085
|
+
['syn-focus', SynFocusEvent]
|
|
1086
|
+
]>;
|
|
1087
|
+
/**
|
|
1088
|
+
* @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
|
|
1089
|
+
* @documentation https://synergy.style/components/radio-group
|
|
1090
|
+
* @status stable
|
|
1091
|
+
* @since 2.0
|
|
1092
|
+
*
|
|
1093
|
+
* @dependency syn-button-group
|
|
1094
|
+
*
|
|
1095
|
+
* @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
|
|
1096
|
+
* @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
|
|
1097
|
+
* attribute.
|
|
1098
|
+
* @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
|
|
1099
|
+
*
|
|
1100
|
+
* @event syn-change - Emitted when the radio group's selected value changes.
|
|
1101
|
+
* @event syn-input - Emitted when the radio group receives user input.
|
|
1102
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
1103
|
+
*
|
|
1104
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
1105
|
+
* @csspart form-control-label - The label's wrapper.
|
|
1106
|
+
* @csspart form-control-input - The input's wrapper.
|
|
1107
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
1108
|
+
* @csspart button-group - The button group that wraps radio buttons.
|
|
1109
|
+
* @csspart button-group__base - The button group's `base` part.
|
|
1110
|
+
*/ export type SynRadioGroupJSXElement = SynCustomElement<SynRadioGroup, [
|
|
1111
|
+
[
|
|
1112
|
+
'syn-change',
|
|
1113
|
+
SynChangeEvent
|
|
1114
|
+
],
|
|
1115
|
+
[
|
|
1116
|
+
'syn-input',
|
|
1117
|
+
SynInputEvent
|
|
1118
|
+
],
|
|
1119
|
+
[
|
|
1120
|
+
'syn-invalid',
|
|
1121
|
+
SynInvalidEvent
|
|
1122
|
+
]
|
|
1123
|
+
]>;
|
|
1124
|
+
/**
|
|
1125
|
+
* @summary Ranges allow the user to select values within a given range using one or two thumbs.
|
|
1126
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
|
|
1127
|
+
* @status stable
|
|
1128
|
+
*
|
|
1129
|
+
* @dependency syn-tooltip
|
|
1130
|
+
*
|
|
1131
|
+
* @slot label - The range's label. Alternatively, you can use the `label` attribute.
|
|
1132
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the range.
|
|
1133
|
+
* @slot suffix - Used to append a presentational icon or similar element to the range.
|
|
1134
|
+
* @slot help-text - Text that describes how to use the range.
|
|
1135
|
+
* Alternatively, you can use the `help-text` attribute.
|
|
1136
|
+
* @slot ticks - Used to display tick marks at specific intervals along the range.
|
|
1137
|
+
*
|
|
1138
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
1139
|
+
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
|
|
1140
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
1141
|
+
* @event syn-input - Emitted when the control receives input.
|
|
1142
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity
|
|
1143
|
+
* and its constraints aren't satisfied.
|
|
1144
|
+
* @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
|
|
1145
|
+
* Use `Event.preventDefault()` to prevent movement.
|
|
1146
|
+
*
|
|
1147
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
1148
|
+
* @csspart form-control-label - The label's wrapper.
|
|
1149
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
1150
|
+
* @csspart base - The component's base wrapper.
|
|
1151
|
+
* @csspart input-wrapper - The container that wraps the input track and ticks.
|
|
1152
|
+
* @csspart track-wrapper - The wrapper for the track.
|
|
1153
|
+
* @csspart track - The inactive track.
|
|
1154
|
+
* @csspart active-track - The active track.
|
|
1155
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
1156
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
1157
|
+
* @csspart ticks - The container that wraps the tick marks.
|
|
1158
|
+
* @csspart thumb - The thumb(s) that the user can drag to change the range.
|
|
1159
|
+
*
|
|
1160
|
+
* @csspart tooltip__base - The base of the tooltip
|
|
1161
|
+
* @csspart tooltip__arrow - The arrow of the tooltip
|
|
1162
|
+
* @csspart tooltip__popup - The popup of the tooltip
|
|
1163
|
+
* @csspart tooltip__body - The body of the tooltip
|
|
1164
|
+
*
|
|
1165
|
+
* @cssproperty --thumb-size - The size of a thumb.
|
|
1166
|
+
* @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
|
|
1167
|
+
* Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
|
|
1168
|
+
* @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
|
|
1169
|
+
* @cssproperty --track-color-active - Color of the track representing the current value.
|
|
1170
|
+
* @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
|
|
1171
|
+
* @cssproperty --track-height - The height of the track.
|
|
1172
|
+
* @cssproperty --track-active-offset - The point of origin of the active track,
|
|
1173
|
+
* starting at the left side of the range.
|
|
1174
|
+
*/ export type SynRangeJSXElement = SynCustomElement<SynRange, [
|
|
1175
|
+
[
|
|
1176
|
+
'syn-blur',
|
|
1177
|
+
SynBlurEvent
|
|
1178
|
+
],
|
|
1179
|
+
[
|
|
1180
|
+
'syn-change',
|
|
1181
|
+
SynChangeEvent
|
|
1182
|
+
],
|
|
1183
|
+
[
|
|
1184
|
+
'syn-focus',
|
|
1185
|
+
SynFocusEvent
|
|
1186
|
+
],
|
|
1187
|
+
[
|
|
1188
|
+
'syn-input',
|
|
1189
|
+
SynInputEvent
|
|
1190
|
+
],
|
|
1191
|
+
[
|
|
1192
|
+
'syn-invalid',
|
|
1193
|
+
SynInvalidEvent
|
|
1194
|
+
],
|
|
1195
|
+
[
|
|
1196
|
+
'syn-move',
|
|
1197
|
+
SynMoveEvent
|
|
1198
|
+
]
|
|
1199
|
+
]>;
|
|
1200
|
+
/**
|
|
1201
|
+
* @summary Ticks visually improve positioning on range sliders.
|
|
1202
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
|
|
1203
|
+
* @status stable
|
|
1204
|
+
*
|
|
1205
|
+
* @slot - The tick's label
|
|
1206
|
+
*
|
|
1207
|
+
* @csspart base - The component's base wrapper.
|
|
1208
|
+
* @csspart label - The component's label.
|
|
1209
|
+
* @csspart line - The component's tick line.
|
|
1210
|
+
*
|
|
1211
|
+
* @cssproperty --tick-height - The height of the tick marker.
|
|
1212
|
+
* @cssproperty --tick-label-top - The top offset of the tick label.
|
|
1213
|
+
*/ export type SynRangeTickJSXElement = SynCustomElement<SynRangeTick, []>;
|
|
1214
|
+
/**
|
|
1215
|
+
* @summary Selects allow you to choose items from a menu of predefined options.
|
|
1216
|
+
* @documentation https://synergy.style/components/select
|
|
1217
|
+
* @status stable
|
|
1218
|
+
* @since 2.0
|
|
1219
|
+
*
|
|
1220
|
+
* @dependency syn-icon
|
|
1221
|
+
* @dependency syn-popup
|
|
1222
|
+
* @dependency syn-tag
|
|
1223
|
+
*
|
|
1224
|
+
* @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.
|
|
1225
|
+
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
|
1226
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
|
|
1227
|
+
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
|
|
1228
|
+
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
1229
|
+
* @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
|
|
1230
|
+
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
1231
|
+
*
|
|
1232
|
+
* @event syn-change - Emitted when the control's value changes.
|
|
1233
|
+
* @event syn-clear - Emitted when the control's value is cleared.
|
|
1234
|
+
* @event syn-input - Emitted when the control receives input.
|
|
1235
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
1236
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
1237
|
+
* @event syn-show - Emitted when the select's menu opens.
|
|
1238
|
+
* @event syn-after-show - Emitted after the select's menu opens and all animations are complete.
|
|
1239
|
+
* @event syn-hide - Emitted when the select's menu closes.
|
|
1240
|
+
* @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.
|
|
1241
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
1242
|
+
*
|
|
1243
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
1244
|
+
* @csspart form-control-label - The label's wrapper.
|
|
1245
|
+
* @csspart form-control-input - The select's wrapper.
|
|
1246
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
1247
|
+
* @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
|
|
1248
|
+
* @csspart prefix - The container that wraps the prefix slot.
|
|
1249
|
+
* @csspart suffix - The container that wraps the suffix slot.
|
|
1250
|
+
* @csspart display-input - The element that displays the selected option's label, an `<input>` element.
|
|
1251
|
+
* @csspart listbox - The listbox container where options are slotted.
|
|
1252
|
+
* @csspart tags - The container that houses option tags when `multiselect` is used.
|
|
1253
|
+
* @csspart tag - The individual tags that represent each multiselect option.
|
|
1254
|
+
* @csspart tag__base - The tag's base part.
|
|
1255
|
+
* @csspart tag__content - The tag's content part.
|
|
1256
|
+
* @csspart tag__remove-button - The tag's remove button.
|
|
1257
|
+
* @csspart tag__remove-button__base - The tag's remove button base part.
|
|
1258
|
+
* @csspart clear-button - The clear button.
|
|
1259
|
+
* @csspart expand-icon - The container that wraps the expand icon.
|
|
1260
|
+
*/ export type SynSelectJSXElement = SynCustomElement<SynSelect, [
|
|
1261
|
+
[
|
|
1262
|
+
'syn-change',
|
|
1263
|
+
SynChangeEvent
|
|
1264
|
+
],
|
|
1265
|
+
[
|
|
1266
|
+
'syn-clear',
|
|
1267
|
+
SynClearEvent
|
|
1268
|
+
],
|
|
1269
|
+
[
|
|
1270
|
+
'syn-input',
|
|
1271
|
+
SynInputEvent
|
|
1272
|
+
],
|
|
1273
|
+
[
|
|
1274
|
+
'syn-focus',
|
|
1275
|
+
SynFocusEvent
|
|
1276
|
+
],
|
|
1277
|
+
[
|
|
1278
|
+
'syn-blur',
|
|
1279
|
+
SynBlurEvent
|
|
1280
|
+
],
|
|
1281
|
+
[
|
|
1282
|
+
'syn-show',
|
|
1283
|
+
SynShowEvent
|
|
1284
|
+
],
|
|
1285
|
+
[
|
|
1286
|
+
'syn-after-show',
|
|
1287
|
+
SynAfterShowEvent
|
|
1288
|
+
],
|
|
1289
|
+
[
|
|
1290
|
+
'syn-hide',
|
|
1291
|
+
SynHideEvent
|
|
1292
|
+
],
|
|
1293
|
+
[
|
|
1294
|
+
'syn-after-hide',
|
|
1295
|
+
SynAfterHideEvent
|
|
1296
|
+
],
|
|
1297
|
+
[
|
|
1298
|
+
'syn-invalid',
|
|
1299
|
+
SynInvalidEvent
|
|
1300
|
+
]
|
|
1301
|
+
]>;
|
|
1302
|
+
/**
|
|
1303
|
+
* @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
|
|
1304
|
+
* It can be used to group multiple navigation items (<syn-nav-item />s) together.
|
|
1305
|
+
*
|
|
1306
|
+
* @example
|
|
1307
|
+
* <syn-side-nav open>
|
|
1308
|
+
* <syn-nav-item >Item 1</syn-nav-item>
|
|
1309
|
+
* <syn-nav-item divider>Item 2</syn-nav-item>
|
|
1310
|
+
* </syn-side-nav>
|
|
1311
|
+
*
|
|
1312
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
|
|
1313
|
+
* @status stable
|
|
1314
|
+
* @since 1.14.0
|
|
1315
|
+
*
|
|
1316
|
+
* @dependency syn-divider
|
|
1317
|
+
* @dependency syn-drawer
|
|
1318
|
+
*
|
|
1319
|
+
* @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
|
|
1320
|
+
* @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
|
|
1321
|
+
* Please avoid having to many nav-items as it can massively influence the user experience.
|
|
1322
|
+
*
|
|
1323
|
+
* @event syn-show - Emitted when the side-nav opens.
|
|
1324
|
+
* @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
|
|
1325
|
+
* @event syn-hide - Emitted when the side-nav closes.
|
|
1326
|
+
* @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
|
|
1327
|
+
*
|
|
1328
|
+
* @csspart base - The components base wrapper
|
|
1329
|
+
* @csspart drawer - The drawer that is used under the hood for creating the side-nav
|
|
1330
|
+
* @csspart content-container - The components main content container
|
|
1331
|
+
* @csspart content - The components main content
|
|
1332
|
+
* @csspart footer-container - The components footer content container
|
|
1333
|
+
* @csspart footer-divider - The components footer divider
|
|
1334
|
+
* @csspart footer - The components footer content
|
|
1335
|
+
* @csspart overlay - The overlay that covers the screen behind the side-nav.
|
|
1336
|
+
*
|
|
1337
|
+
* @cssproperty --side-nav-open-width - The width of the side-nav if in open state
|
|
1338
|
+
*
|
|
1339
|
+
* @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.
|
|
1340
|
+
* @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.
|
|
1341
|
+
* @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.
|
|
1342
|
+
* @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.
|
|
1343
|
+
* @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
|
|
1344
|
+
* @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
|
|
1345
|
+
*/ export type SynSideNavJSXElement = SynCustomElement<SynSideNav, [
|
|
1346
|
+
[
|
|
1347
|
+
'syn-show',
|
|
1348
|
+
SynShowEvent
|
|
1349
|
+
],
|
|
1350
|
+
[
|
|
1351
|
+
'syn-after-show',
|
|
1352
|
+
SynAfterShowEvent
|
|
1353
|
+
],
|
|
1354
|
+
[
|
|
1355
|
+
'syn-hide',
|
|
1356
|
+
SynHideEvent
|
|
1357
|
+
],
|
|
1358
|
+
[
|
|
1359
|
+
'syn-after-hide',
|
|
1360
|
+
SynAfterHideEvent
|
|
1361
|
+
]
|
|
1362
|
+
]>;
|
|
1363
|
+
/**
|
|
1364
|
+
* @summary Spinners are used to show the progress of an indeterminate operation.
|
|
1365
|
+
* @documentation https://synergy.style/components/spinner
|
|
1366
|
+
* @status stable
|
|
1367
|
+
* @since 2.0
|
|
1368
|
+
*
|
|
1369
|
+
* @csspart base - The component's base wrapper.
|
|
1370
|
+
*
|
|
1371
|
+
* @cssproperty --track-width - The width of the track.
|
|
1372
|
+
* @cssproperty --indicator-color - The color of the spinner's indicator.
|
|
1373
|
+
* @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
|
|
1374
|
+
*/ export type SynSpinnerJSXElement = SynCustomElement<SynSpinner, []>;
|
|
1375
|
+
/**
|
|
1376
|
+
* @summary Switches allow the user to toggle an option on or off.
|
|
1377
|
+
* @documentation https://synergy.style/components/switch
|
|
1378
|
+
* @status stable
|
|
1379
|
+
* @since 2.0
|
|
1380
|
+
*
|
|
1381
|
+
* @slot - The switch's label.
|
|
1382
|
+
* @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
|
|
1383
|
+
*
|
|
1384
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
1385
|
+
* @event syn-change - Emitted when the control's checked state changes.
|
|
1386
|
+
* @event syn-input - Emitted when the control receives input.
|
|
1387
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
1388
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
1389
|
+
*
|
|
1390
|
+
* @csspart base - The component's base wrapper.
|
|
1391
|
+
* @csspart control - The control that houses the switch's thumb.
|
|
1392
|
+
* @csspart thumb - The switch's thumb.
|
|
1393
|
+
* @csspart label - The switch's label.
|
|
1394
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
1395
|
+
*
|
|
1396
|
+
* @cssproperty --width - The width of the switch.
|
|
1397
|
+
* @cssproperty --height - The height of the switch.
|
|
1398
|
+
* @cssproperty --thumb-size - The size of the thumb.
|
|
1399
|
+
*/ export type SynSwitchJSXElement = SynCustomElement<SynSwitch, [
|
|
1400
|
+
[
|
|
1401
|
+
'syn-blur',
|
|
1402
|
+
SynBlurEvent
|
|
1403
|
+
],
|
|
1404
|
+
[
|
|
1405
|
+
'syn-change',
|
|
1406
|
+
SynChangeEvent
|
|
1407
|
+
],
|
|
1408
|
+
[
|
|
1409
|
+
'syn-input',
|
|
1410
|
+
SynInputEvent
|
|
1411
|
+
],
|
|
1412
|
+
[
|
|
1413
|
+
'syn-focus',
|
|
1414
|
+
SynFocusEvent
|
|
1415
|
+
],
|
|
1416
|
+
[
|
|
1417
|
+
'syn-invalid',
|
|
1418
|
+
SynInvalidEvent
|
|
1419
|
+
]
|
|
1420
|
+
]>;
|
|
1421
|
+
/**
|
|
1422
|
+
* @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
|
|
1423
|
+
* @documentation https://synergy.style/components/tab
|
|
1424
|
+
* @status stable
|
|
1425
|
+
* @since 2.0
|
|
1426
|
+
*
|
|
1427
|
+
* @dependency syn-icon-button
|
|
1428
|
+
*
|
|
1429
|
+
* @slot - The tab's label.
|
|
1430
|
+
*
|
|
1431
|
+
* @event syn-close - Emitted when the tab is closable and the close button is activated.
|
|
1432
|
+
*
|
|
1433
|
+
* @csspart base - The component's base wrapper.
|
|
1434
|
+
* @csspart close-button - The close button, an `<syn-icon-button>`.
|
|
1435
|
+
* @csspart close-button__base - The close button's exported `base` part.
|
|
1436
|
+
*/ export type SynTabJSXElement = SynCustomElement<SynTab, [
|
|
1437
|
+
['syn-close', SynCloseEvent]
|
|
1438
|
+
]>;
|
|
1439
|
+
/**
|
|
1440
|
+
* @summary Tab groups organize content into a container that shows one section at a time.
|
|
1441
|
+
* @documentation https://synergy.style/components/tab-group
|
|
1442
|
+
* @status stable
|
|
1443
|
+
* @since 2.0
|
|
1444
|
+
*
|
|
1445
|
+
* @dependency syn-icon-button
|
|
1446
|
+
*
|
|
1447
|
+
* @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
|
|
1448
|
+
* @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
|
|
1449
|
+
*
|
|
1450
|
+
* @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
|
|
1451
|
+
* @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
|
|
1452
|
+
*
|
|
1453
|
+
* @csspart base - The component's base wrapper.
|
|
1454
|
+
* @csspart nav - The tab group's navigation container where tabs are slotted in.
|
|
1455
|
+
* @csspart tabs - The container that wraps the tabs.
|
|
1456
|
+
* @csspart active-tab-indicator - The line that highlights the currently selected tab.
|
|
1457
|
+
* @csspart body - The tab group's body where tab panels are slotted in.
|
|
1458
|
+
* @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
|
|
1459
|
+
* @csspart scroll-button--start - The starting scroll button.
|
|
1460
|
+
* @csspart scroll-button--end - The ending scroll button.
|
|
1461
|
+
* @csspart scroll-button__base - The scroll button's exported `base` part.
|
|
1462
|
+
*
|
|
1463
|
+
* @cssproperty --indicator-color - The color of the active tab indicator.
|
|
1464
|
+
* @cssproperty --indicator-width - The width of the active tab indicator.
|
|
1465
|
+
* @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
|
|
1466
|
+
* @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
|
|
1467
|
+
*/ export type SynTabGroupJSXElement = SynCustomElement<SynTabGroup, [
|
|
1468
|
+
['syn-tab-show', SynTabShowEvent],
|
|
1469
|
+
['syn-tab-hide', SynTabHideEvent]
|
|
1470
|
+
]>;
|
|
1471
|
+
/**
|
|
1472
|
+
* @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
|
|
1473
|
+
* @documentation https://synergy.style/components/tab-panel
|
|
1474
|
+
* @status stable
|
|
1475
|
+
* @since 2.0
|
|
1476
|
+
*
|
|
1477
|
+
* @slot - The tab panel's content.
|
|
1478
|
+
*
|
|
1479
|
+
* @csspart base - The component's base wrapper.
|
|
1480
|
+
*
|
|
1481
|
+
* @cssproperty --padding - The tab panel's padding.
|
|
1482
|
+
*/ export type SynTabPanelJSXElement = SynCustomElement<SynTabPanel, []>;
|
|
1483
|
+
/**
|
|
1484
|
+
* @summary Tags are used as labels to organize things or to indicate a selection.
|
|
1485
|
+
* @documentation https://synergy.style/components/tag
|
|
1486
|
+
* @status stable
|
|
1487
|
+
* @since 2.0
|
|
1488
|
+
*
|
|
1489
|
+
* @dependency syn-icon-button
|
|
1490
|
+
*
|
|
1491
|
+
* @slot - The tag's content.
|
|
1492
|
+
*
|
|
1493
|
+
* @event syn-remove - Emitted when the remove button is activated.
|
|
1494
|
+
*
|
|
1495
|
+
* @csspart base - The component's base wrapper.
|
|
1496
|
+
* @csspart content - The tag's content.
|
|
1497
|
+
* @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.
|
|
1498
|
+
* @csspart remove-button__base - The remove button's exported `base` part.
|
|
1499
|
+
*/ export type SynTagJSXElement = SynCustomElement<SynTag, [
|
|
1500
|
+
['syn-remove', SynRemoveEvent]
|
|
1501
|
+
]>;
|
|
1502
|
+
/**
|
|
1503
|
+
* @summary Textareas collect data from the user and allow multiple lines of text.
|
|
1504
|
+
* @documentation https://synergy.style/components/textarea
|
|
1505
|
+
* @status stable
|
|
1506
|
+
* @since 2.0
|
|
1507
|
+
*
|
|
1508
|
+
* @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
|
|
1509
|
+
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
1510
|
+
*
|
|
1511
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
1512
|
+
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
|
|
1513
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
1514
|
+
* @event syn-input - Emitted when the control receives input.
|
|
1515
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
1516
|
+
*
|
|
1517
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
1518
|
+
* @csspart form-control-label - The label's wrapper.
|
|
1519
|
+
* @csspart form-control-input - The input's wrapper.
|
|
1520
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
1521
|
+
* @csspart base - The component's base wrapper.
|
|
1522
|
+
* @csspart textarea - The internal `<textarea>` control.
|
|
1523
|
+
*/ export type SynTextareaJSXElement = SynCustomElement<SynTextarea, [
|
|
1524
|
+
[
|
|
1525
|
+
'syn-blur',
|
|
1526
|
+
SynBlurEvent
|
|
1527
|
+
],
|
|
1528
|
+
[
|
|
1529
|
+
'syn-change',
|
|
1530
|
+
SynChangeEvent
|
|
1531
|
+
],
|
|
1532
|
+
[
|
|
1533
|
+
'syn-focus',
|
|
1534
|
+
SynFocusEvent
|
|
1535
|
+
],
|
|
1536
|
+
[
|
|
1537
|
+
'syn-input',
|
|
1538
|
+
SynInputEvent
|
|
1539
|
+
],
|
|
1540
|
+
[
|
|
1541
|
+
'syn-invalid',
|
|
1542
|
+
SynInvalidEvent
|
|
1543
|
+
]
|
|
1544
|
+
]>;
|
|
1545
|
+
/**
|
|
1546
|
+
* @summary Tooltips display additional information based on a specific action.
|
|
1547
|
+
* @documentation https://synergy.style/components/tooltip
|
|
1548
|
+
* @status stable
|
|
1549
|
+
* @since 2.0
|
|
1550
|
+
*
|
|
1551
|
+
* @dependency syn-popup
|
|
1552
|
+
*
|
|
1553
|
+
* @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
|
|
1554
|
+
* @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
|
|
1555
|
+
*
|
|
1556
|
+
* @event syn-show - Emitted when the tooltip begins to show.
|
|
1557
|
+
* @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.
|
|
1558
|
+
* @event syn-hide - Emitted when the tooltip begins to hide.
|
|
1559
|
+
* @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.
|
|
1560
|
+
*
|
|
1561
|
+
* @csspart base - The component's base wrapper, an `<syn-popup>` element.
|
|
1562
|
+
* @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
|
|
1563
|
+
* @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
|
|
1564
|
+
* @csspart body - The tooltip's body where its content is rendered.
|
|
1565
|
+
*
|
|
1566
|
+
* @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
|
|
1567
|
+
* @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
|
|
1568
|
+
* @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
|
|
1569
|
+
*
|
|
1570
|
+
* @animation tooltip.show - The animation to use when showing the tooltip.
|
|
1571
|
+
* @animation tooltip.hide - The animation to use when hiding the tooltip.
|
|
1572
|
+
*/ export type SynTooltipJSXElement = SynCustomElement<SynTooltip, [
|
|
1573
|
+
[
|
|
1574
|
+
'syn-show',
|
|
1575
|
+
SynShowEvent
|
|
1576
|
+
],
|
|
1577
|
+
[
|
|
1578
|
+
'syn-after-show',
|
|
1579
|
+
SynAfterShowEvent
|
|
1580
|
+
],
|
|
1581
|
+
[
|
|
1582
|
+
'syn-hide',
|
|
1583
|
+
SynHideEvent
|
|
1584
|
+
],
|
|
1585
|
+
[
|
|
1586
|
+
'syn-after-hide',
|
|
1587
|
+
SynAfterHideEvent
|
|
1588
|
+
]
|
|
1589
|
+
]>;
|
|
1590
|
+
/**
|
|
1591
|
+
* @summary Validate provides form field validation messages in a unified way.
|
|
1592
|
+
* It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
|
|
1593
|
+
* and showing the validation message in a consistent, user defined way.
|
|
1594
|
+
*
|
|
1595
|
+
* @dependency syn-alert
|
|
1596
|
+
*
|
|
1597
|
+
* @slot - The form field that should be validated.
|
|
1598
|
+
* Avoid slotting in more than one element, as subsequent ones will be ignored.
|
|
1599
|
+
*
|
|
1600
|
+
* @csspart base - The component's base wrapper.
|
|
1601
|
+
* @csspart input-wrapper - The container that wraps the form field.
|
|
1602
|
+
* @csspart alert - The syn-alert that is shown when the variant is set to "inline".
|
|
1603
|
+
* @csspart alert__base - The container that wraps the alert.
|
|
1604
|
+
* @csspart alert__message - The container that wraps the alert message.
|
|
1605
|
+
* @csspart alert__icon - The container that wraps the alert icon.
|
|
1606
|
+
*/ export type SynValidateJSXElement = SynCustomElement<SynValidate, []>;
|
|
1607
|
+
declare module 'react' {
|
|
1608
|
+
namespace JSX {
|
|
1609
|
+
interface IntrinsicElements {
|
|
1610
|
+
/**
|
|
1611
|
+
* @summary Accordions provide the ability to group a list of `<syn-details>`.
|
|
1612
|
+
*
|
|
1613
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
|
|
1614
|
+
* @status stable
|
|
1615
|
+
* @since 1.23.0
|
|
1616
|
+
*
|
|
1617
|
+
* @slot - The accordion's main content. Must be `<syn-details />` elements.
|
|
1618
|
+
*
|
|
1619
|
+
* @csspart base - The component's base wrapper.
|
|
1620
|
+
*/ 'syn-accordion': SynAccordionJSXElement;
|
|
1621
|
+
/**
|
|
1622
|
+
* @summary Alerts are used to display important messages inline or as toast notifications.
|
|
1623
|
+
* @documentation https://synergy.style/components/alert
|
|
1624
|
+
* @status stable
|
|
1625
|
+
* @since 2.0
|
|
1626
|
+
*
|
|
1627
|
+
* @dependency syn-icon-button
|
|
1628
|
+
*
|
|
1629
|
+
* @slot - The alert's main content.
|
|
1630
|
+
* @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
|
|
1631
|
+
*
|
|
1632
|
+
* @event syn-show - Emitted when the alert opens.
|
|
1633
|
+
* @event syn-after-show - Emitted after the alert opens and all animations are complete.
|
|
1634
|
+
* @event syn-hide - Emitted when the alert closes.
|
|
1635
|
+
* @event syn-after-hide - Emitted after the alert closes and all animations are complete.
|
|
1636
|
+
*
|
|
1637
|
+
* @csspart base - The component's base wrapper.
|
|
1638
|
+
* @csspart icon - The container that wraps the optional icon.
|
|
1639
|
+
* @csspart message - The container that wraps the alert's main content.
|
|
1640
|
+
* @csspart close-button - The close button, an `<syn-icon-button>`.
|
|
1641
|
+
* @csspart close-button__base - The close button's exported `base` part.
|
|
1642
|
+
*
|
|
1643
|
+
* @animation alert.show - The animation to use when showing the alert.
|
|
1644
|
+
* @animation alert.hide - The animation to use when hiding the alert.
|
|
1645
|
+
*/ 'syn-alert': SynAlertJSXElement;
|
|
1646
|
+
/**
|
|
1647
|
+
* @summary Badges are used to draw attention and display statuses or counts.
|
|
1648
|
+
* @documentation https://synergy.style/components/badge
|
|
1649
|
+
* @status stable
|
|
1650
|
+
* @since 2.0
|
|
1651
|
+
*
|
|
1652
|
+
* @slot - The badge's content.
|
|
1653
|
+
*
|
|
1654
|
+
* @csspart base - The component's base wrapper.
|
|
1655
|
+
*/ 'syn-badge': SynBadgeJSXElement;
|
|
1656
|
+
/**
|
|
1657
|
+
* @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
|
1658
|
+
* @documentation https://synergy.style/components/breadcrumb
|
|
1659
|
+
* @status stable
|
|
1660
|
+
* @since 2.0
|
|
1661
|
+
*
|
|
1662
|
+
* @slot - One or more breadcrumb items to display.
|
|
1663
|
+
* @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
|
|
1664
|
+
*
|
|
1665
|
+
* @dependency syn-icon
|
|
1666
|
+
*
|
|
1667
|
+
* @csspart base - The component's base wrapper.
|
|
1668
|
+
*/ 'syn-breadcrumb': SynBreadcrumbJSXElement;
|
|
1669
|
+
/**
|
|
1670
|
+
* @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
|
|
1671
|
+
* @documentation https://synergy.style/components/breadcrumb-item
|
|
1672
|
+
* @status stable
|
|
1673
|
+
* @since 2.0
|
|
1674
|
+
*
|
|
1675
|
+
* @slot - The breadcrumb item's label.
|
|
1676
|
+
* @slot prefix - An optional prefix, usually an icon or icon button.
|
|
1677
|
+
* @slot suffix - An optional suffix, usually an icon or icon button.
|
|
1678
|
+
* @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
|
|
1679
|
+
* you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.
|
|
1680
|
+
*
|
|
1681
|
+
* @csspart base - The component's base wrapper.
|
|
1682
|
+
* @csspart label - The breadcrumb item's label.
|
|
1683
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
1684
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
1685
|
+
* @csspart separator - The container that wraps the separator.
|
|
1686
|
+
*/ 'syn-breadcrumb-item': SynBreadcrumbItemJSXElement;
|
|
1687
|
+
/**
|
|
1688
|
+
* @summary Buttons represent actions that are available to the user.
|
|
1689
|
+
* @documentation https://synergy.style/components/button
|
|
1690
|
+
* @status stable
|
|
1691
|
+
* @since 2.0
|
|
1692
|
+
*
|
|
1693
|
+
* @dependency syn-icon
|
|
1694
|
+
* @dependency syn-spinner
|
|
1695
|
+
*
|
|
1696
|
+
* @event syn-blur - Emitted when the button loses focus.
|
|
1697
|
+
* @event syn-focus - Emitted when the button gains focus.
|
|
1698
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
1699
|
+
*
|
|
1700
|
+
* @slot - The button's label.
|
|
1701
|
+
* @slot prefix - A presentational prefix icon or similar element.
|
|
1702
|
+
* @slot suffix - A presentational suffix icon or similar element.
|
|
1703
|
+
*
|
|
1704
|
+
* @csspart base - The component's base wrapper.
|
|
1705
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
1706
|
+
* @csspart label - The button's label.
|
|
1707
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
1708
|
+
* @csspart caret - The button's caret icon, an `<syn-icon>` element.
|
|
1709
|
+
* @csspart spinner - The spinner that shows when the button is in the loading state.
|
|
1710
|
+
*/ 'syn-button': SynButtonJSXElement;
|
|
1711
|
+
/**
|
|
1712
|
+
* @summary Button groups can be used to group related buttons into sections.
|
|
1713
|
+
* @documentation https://synergy.style/components/button-group
|
|
1714
|
+
* @status stable
|
|
1715
|
+
* @since 2.0
|
|
1716
|
+
*
|
|
1717
|
+
* @slot - One or more `<syn-button>` elements to display in the button group.
|
|
1718
|
+
*
|
|
1719
|
+
* @csspart base - The component's base wrapper.
|
|
1720
|
+
*/ 'syn-button-group': SynButtonGroupJSXElement;
|
|
1721
|
+
/**
|
|
1722
|
+
* @summary Cards can be used to group related subjects in a container.
|
|
1723
|
+
* @documentation https://synergy.style/components/card
|
|
1724
|
+
* @status stable
|
|
1725
|
+
* @since 2.0
|
|
1726
|
+
*
|
|
1727
|
+
* @slot - The card's main content.
|
|
1728
|
+
* @slot header - An optional header for the card.
|
|
1729
|
+
* @slot footer - An optional footer for the card.
|
|
1730
|
+
* @slot image - An optional image to render at the start of the card.
|
|
1731
|
+
*
|
|
1732
|
+
* @csspart base - The component's base wrapper.
|
|
1733
|
+
* @csspart image - The container that wraps the card's image.
|
|
1734
|
+
* @csspart header - The container that wraps the card's header.
|
|
1735
|
+
* @csspart body - The container that wraps the card's main content.
|
|
1736
|
+
* @csspart footer - The container that wraps the card's footer.
|
|
1737
|
+
*
|
|
1738
|
+
* @cssproperty --border-color - The card's border color, including borders that occur inside the card.
|
|
1739
|
+
* @cssproperty --border-radius - The border radius for the card's edges.
|
|
1740
|
+
* @cssproperty --border-width - The width of the card's borders.
|
|
1741
|
+
* @cssproperty --padding - The padding to use for the card's sections.
|
|
1742
|
+
*/ 'syn-card': SynCardJSXElement;
|
|
1743
|
+
/**
|
|
1744
|
+
* @summary Checkboxes allow the user to toggle an option on or off.
|
|
1745
|
+
* @documentation https://synergy.style/components/checkbox
|
|
1746
|
+
* @status stable
|
|
1747
|
+
* @since 2.0
|
|
1748
|
+
*
|
|
1749
|
+
* @dependency syn-icon
|
|
1750
|
+
*
|
|
1751
|
+
* @slot - The checkbox's label.
|
|
1752
|
+
* @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
|
|
1753
|
+
*
|
|
1754
|
+
* @event syn-blur - Emitted when the checkbox loses focus.
|
|
1755
|
+
* @event syn-change - Emitted when the checked state changes.
|
|
1756
|
+
* @event syn-focus - Emitted when the checkbox gains focus.
|
|
1757
|
+
* @event syn-input - Emitted when the checkbox receives input.
|
|
1758
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
1759
|
+
*
|
|
1760
|
+
* @csspart base - The component's base wrapper.
|
|
1761
|
+
* @csspart control - The square container that wraps the checkbox's checked state.
|
|
1762
|
+
* @csspart control--checked - Matches the control part when the checkbox is checked.
|
|
1763
|
+
* @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
|
|
1764
|
+
* @csspart checked-icon - The checked icon, an `<syn-icon>` element.
|
|
1765
|
+
* @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.
|
|
1766
|
+
* @csspart label - The container that wraps the checkbox's label.
|
|
1767
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
1768
|
+
*/ 'syn-checkbox': SynCheckboxJSXElement;
|
|
1769
|
+
/**
|
|
1770
|
+
* @summary Comboboxes allow you to choose items from a menu of predefined options.
|
|
1771
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
|
|
1772
|
+
* @status stable
|
|
1773
|
+
*
|
|
1774
|
+
* @dependency syn-icon
|
|
1775
|
+
* @dependency syn-popup
|
|
1776
|
+
*
|
|
1777
|
+
* @slot - The listbox options. Must be `<syn-option>` elements.
|
|
1778
|
+
* You can use `<syn-optgroup>`'s to group items visually.
|
|
1779
|
+
* @slot label - The combobox's label. Alternatively, you can use the `label` attribute.
|
|
1780
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
|
|
1781
|
+
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
|
|
1782
|
+
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
1783
|
+
* @slot expand-icon - The icon to show when the control is expanded and collapsed.
|
|
1784
|
+
* Rotates on open and close.
|
|
1785
|
+
* @slot help-text - Text that describes how to use the combobox.
|
|
1786
|
+
* Alternatively, you can use the `help-text` attribute.
|
|
1787
|
+
*
|
|
1788
|
+
* @event syn-change - Emitted when the control's value changes.
|
|
1789
|
+
* @event syn-clear - Emitted when the control's value is cleared.
|
|
1790
|
+
* @event syn-input - Emitted when the control receives input.
|
|
1791
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
1792
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
1793
|
+
* @event syn-show - Emitted when the combobox's menu opens.
|
|
1794
|
+
* @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.
|
|
1795
|
+
* @event syn-hide - Emitted when the combobox's menu closes.
|
|
1796
|
+
* @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.
|
|
1797
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity
|
|
1798
|
+
* and its constraints aren't satisfied.
|
|
1799
|
+
* @event syn-error - Emitted when the combobox menu fails to open.
|
|
1800
|
+
*
|
|
1801
|
+
* @csspart form-control - The form control that wraps the label, combobox, and help text.
|
|
1802
|
+
* @csspart form-control-label - The label's wrapper.
|
|
1803
|
+
* @csspart form-control-input - The combobox's wrapper.
|
|
1804
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
1805
|
+
* @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
|
|
1806
|
+
* @csspart prefix - The container that wraps the prefix slot.
|
|
1807
|
+
* @csspart suffix - The container that wraps the suffix slot.
|
|
1808
|
+
* @csspart display-input - The element that displays the selected option's label,
|
|
1809
|
+
* an `<input>` element.
|
|
1810
|
+
* @csspart listbox - The listbox container where the options are slotted
|
|
1811
|
+
* and the filtered options list exists.
|
|
1812
|
+
* @csspart filtered-listbox - The container that wraps the filtered options.
|
|
1813
|
+
* @csspart clear-button - The clear button.
|
|
1814
|
+
* @csspart expand-icon - The container that wraps the expand icon.
|
|
1815
|
+
*
|
|
1816
|
+
* @animation combobox.show - The animation to use when showing the combobox.
|
|
1817
|
+
* @animation combobox.hide - The animation to use when hiding the combobox.
|
|
1818
|
+
*/ 'syn-combobox': SynComboboxJSXElement;
|
|
1819
|
+
/**
|
|
1820
|
+
* @summary Details show a brief summary and expand to show additional content.
|
|
1821
|
+
* @documentation https://synergy.style/components/details
|
|
1822
|
+
* @status stable
|
|
1823
|
+
* @since 2.0
|
|
1824
|
+
*
|
|
1825
|
+
* @dependency syn-icon
|
|
1826
|
+
*
|
|
1827
|
+
* @slot - The details' main content.
|
|
1828
|
+
* @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
|
|
1829
|
+
* @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.
|
|
1830
|
+
* @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.
|
|
1831
|
+
*
|
|
1832
|
+
* @event syn-show - Emitted when the details opens.
|
|
1833
|
+
* @event syn-after-show - Emitted after the details opens and all animations are complete.
|
|
1834
|
+
* @event syn-hide - Emitted when the details closes.
|
|
1835
|
+
* @event syn-after-hide - Emitted after the details closes and all animations are complete.
|
|
1836
|
+
*
|
|
1837
|
+
* @csspart base - The component's base wrapper.
|
|
1838
|
+
* @csspart header - The header that wraps both the summary and the expand/collapse icon.
|
|
1839
|
+
* @csspart summary - The container that wraps the summary.
|
|
1840
|
+
* @csspart summary-icon - The container that wraps the expand/collapse icons.
|
|
1841
|
+
* @csspart content - The details content.
|
|
1842
|
+
*
|
|
1843
|
+
* @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
|
|
1844
|
+
* @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
|
|
1845
|
+
*/ 'syn-details': SynDetailsJSXElement;
|
|
1846
|
+
/**
|
|
1847
|
+
* @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
|
|
1848
|
+
* @documentation https://synergy.style/components/dialog
|
|
1849
|
+
* @status stable
|
|
1850
|
+
* @since 2.0
|
|
1851
|
+
*
|
|
1852
|
+
* @dependency syn-icon-button
|
|
1853
|
+
*
|
|
1854
|
+
* @slot - The dialog's main content.
|
|
1855
|
+
* @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
|
|
1856
|
+
* @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
|
|
1857
|
+
* @slot footer - The dialog's footer, usually one or more buttons representing various options.
|
|
1858
|
+
*
|
|
1859
|
+
* @event syn-show - Emitted when the dialog opens.
|
|
1860
|
+
* @event syn-after-show - Emitted after the dialog opens and all animations are complete.
|
|
1861
|
+
* @event syn-hide - Emitted when the dialog closes.
|
|
1862
|
+
* @event syn-after-hide - Emitted after the dialog closes and all animations are complete.
|
|
1863
|
+
* @event syn-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
|
|
1864
|
+
* `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
|
|
1865
|
+
* @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
|
|
1866
|
+
* close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
|
|
1867
|
+
* `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
|
|
1868
|
+
* destructive behavior such as data loss.
|
|
1869
|
+
*
|
|
1870
|
+
* @csspart base - The component's base wrapper.
|
|
1871
|
+
* @csspart overlay - The overlay that covers the screen behind the dialog.
|
|
1872
|
+
* @csspart panel - The dialog's panel (where the dialog and its content are rendered).
|
|
1873
|
+
* @csspart header - The dialog's header. This element wraps the title and header actions.
|
|
1874
|
+
* @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
|
|
1875
|
+
* @csspart title - The dialog's title.
|
|
1876
|
+
* @csspart close-button - The close button, an `<syn-icon-button>`.
|
|
1877
|
+
* @csspart close-button__base - The close button's exported `base` part.
|
|
1878
|
+
* @csspart body - The dialog's body.
|
|
1879
|
+
* @csspart footer - The dialog's footer.
|
|
1880
|
+
*
|
|
1881
|
+
* @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
|
|
1882
|
+
* @cssproperty --header-spacing - The amount of padding to use for the header.
|
|
1883
|
+
* @cssproperty --body-spacing - The amount of padding to use for the body.
|
|
1884
|
+
* @cssproperty --footer-spacing - The amount of padding to use for the footer.
|
|
1885
|
+
*
|
|
1886
|
+
* @animation dialog.show - The animation to use when showing the dialog.
|
|
1887
|
+
* @animation dialog.hide - The animation to use when hiding the dialog.
|
|
1888
|
+
* @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
|
|
1889
|
+
* @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
|
|
1890
|
+
* @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
|
|
1891
|
+
*
|
|
1892
|
+
* @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
|
|
1893
|
+
* trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
|
|
1894
|
+
* the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
|
|
1895
|
+
*/ 'syn-dialog': SynDialogJSXElement;
|
|
1896
|
+
/**
|
|
1897
|
+
* @summary Dividers are used to visually separate or group elements.
|
|
1898
|
+
* @documentation https://synergy.style/components/divider
|
|
1899
|
+
* @status stable
|
|
1900
|
+
* @since 2.0
|
|
1901
|
+
*
|
|
1902
|
+
* @cssproperty --color - The color of the divider.
|
|
1903
|
+
* @cssproperty --width - The width of the divider.
|
|
1904
|
+
* @cssproperty --spacing - The spacing of the divider.
|
|
1905
|
+
*/ 'syn-divider': SynDividerJSXElement;
|
|
1906
|
+
/**
|
|
1907
|
+
* @summary Drawers slide in from a container to expose additional options and information.
|
|
1908
|
+
* @documentation https://synergy.style/components/drawer
|
|
1909
|
+
* @status stable
|
|
1910
|
+
* @since 2.0
|
|
1911
|
+
*
|
|
1912
|
+
* @dependency syn-icon-button
|
|
1913
|
+
*
|
|
1914
|
+
* @slot - The drawer's main content.
|
|
1915
|
+
* @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
|
|
1916
|
+
* @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
|
|
1917
|
+
* @slot footer - The drawer's footer, usually one or more buttons representing various options.
|
|
1918
|
+
*
|
|
1919
|
+
* @event syn-show - Emitted when the drawer opens.
|
|
1920
|
+
* @event syn-after-show - Emitted after the drawer opens and all animations are complete.
|
|
1921
|
+
* @event syn-hide - Emitted when the drawer closes.
|
|
1922
|
+
* @event syn-after-hide - Emitted after the drawer closes and all animations are complete.
|
|
1923
|
+
* @event syn-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling
|
|
1924
|
+
* `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
|
|
1925
|
+
* @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
|
|
1926
|
+
* close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
|
|
1927
|
+
* `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
|
|
1928
|
+
* destructive behavior such as data loss.
|
|
1929
|
+
*
|
|
1930
|
+
* @csspart base - The component's base wrapper.
|
|
1931
|
+
* @csspart overlay - The overlay that covers the screen behind the drawer.
|
|
1932
|
+
* @csspart panel - The drawer's panel (where the drawer and its content are rendered).
|
|
1933
|
+
* @csspart header - The drawer's header. This element wraps the title and header actions.
|
|
1934
|
+
* @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
|
|
1935
|
+
* @csspart title - The drawer's title.
|
|
1936
|
+
* @csspart close-button - The close button, an `<syn-icon-button>`.
|
|
1937
|
+
* @csspart close-button__base - The close button's exported `base` part.
|
|
1938
|
+
* @csspart body - The drawer's body.
|
|
1939
|
+
* @csspart footer - The drawer's footer.
|
|
1940
|
+
*
|
|
1941
|
+
* @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
|
|
1942
|
+
* depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
|
|
1943
|
+
* @cssproperty --header-spacing - The amount of padding to use for the header.
|
|
1944
|
+
* @cssproperty --body-spacing - The amount of padding to use for the body.
|
|
1945
|
+
* @cssproperty --footer-spacing - The amount of padding to use for the footer.
|
|
1946
|
+
*
|
|
1947
|
+
* @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.
|
|
1948
|
+
* @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.
|
|
1949
|
+
* @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.
|
|
1950
|
+
* @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.
|
|
1951
|
+
* @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.
|
|
1952
|
+
* @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.
|
|
1953
|
+
* @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.
|
|
1954
|
+
* @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.
|
|
1955
|
+
* @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.
|
|
1956
|
+
* @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.
|
|
1957
|
+
* @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.
|
|
1958
|
+
*
|
|
1959
|
+
* @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
|
|
1960
|
+
* trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
|
|
1961
|
+
* the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
|
|
1962
|
+
*/ 'syn-drawer': SynDrawerJSXElement;
|
|
1963
|
+
/**
|
|
1964
|
+
* @summary Dropdowns expose additional content that "drops down" in a panel.
|
|
1965
|
+
* @documentation https://synergy.style/components/dropdown
|
|
1966
|
+
* @status stable
|
|
1967
|
+
* @since 2.0
|
|
1968
|
+
*
|
|
1969
|
+
* @dependency syn-popup
|
|
1970
|
+
*
|
|
1971
|
+
* @slot - The dropdown's main content.
|
|
1972
|
+
* @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
|
|
1973
|
+
*
|
|
1974
|
+
* @event syn-show - Emitted when the dropdown opens.
|
|
1975
|
+
* @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
|
|
1976
|
+
* @event syn-hide - Emitted when the dropdown closes.
|
|
1977
|
+
* @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
|
|
1978
|
+
*
|
|
1979
|
+
* @csspart base - The component's base wrapper, an `<syn-popup>` element.
|
|
1980
|
+
* @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
|
|
1981
|
+
* @csspart trigger - The container that wraps the trigger.
|
|
1982
|
+
* @csspart panel - The panel that gets shown when the dropdown is open.
|
|
1983
|
+
*
|
|
1984
|
+
* @animation dropdown.show - The animation to use when showing the dropdown.
|
|
1985
|
+
* @animation dropdown.hide - The animation to use when hiding the dropdown.
|
|
1986
|
+
*/ 'syn-dropdown': SynDropdownJSXElement;
|
|
1987
|
+
/**
|
|
1988
|
+
* @summary File controls allow selecting an arbitrary number of files for uploading.
|
|
1989
|
+
* @status stable
|
|
1990
|
+
*
|
|
1991
|
+
* @dependency syn-button
|
|
1992
|
+
* @dependency syn-icon
|
|
1993
|
+
*
|
|
1994
|
+
* @slot label - The file control's label. Alternatively, you can use the `label` attribute.
|
|
1995
|
+
* @slot help-text - Text that describes how to use the file control.
|
|
1996
|
+
* Alternatively, you can use the `help-text` attribute.
|
|
1997
|
+
* @slot droparea-icon - Optional droparea icon to use instead of the default.
|
|
1998
|
+
* Works best with `<syn-icon>`.
|
|
1999
|
+
* @slot trigger - Optional content to be used as trigger instead of the default content.
|
|
2000
|
+
* Opening the file dialog on click and as well as drag and drop will work for this content.
|
|
2001
|
+
* Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,
|
|
2002
|
+
* *hide-value*. Also if using the disabled attribute, the disabled styling will not be
|
|
2003
|
+
* applied and must be taken care of yourself.
|
|
2004
|
+
*
|
|
2005
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
2006
|
+
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
|
|
2007
|
+
* @event syn-error - Emitted when multiple files are selected via drag and drop, without
|
|
2008
|
+
* the `multiple` property being set.
|
|
2009
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
2010
|
+
* @event syn-input - Emitted when the control receives input.
|
|
2011
|
+
*
|
|
2012
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
2013
|
+
* @csspart form-control-label - The label's wrapper.
|
|
2014
|
+
* @csspart form-control-input - The input's wrapper.
|
|
2015
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
2016
|
+
* @csspart button-wrapper - The wrapper around the button and text value.
|
|
2017
|
+
* @csspart button - The syn-button acting as a file input.
|
|
2018
|
+
* @csspart button__base - The syn-button's exported `base` part.
|
|
2019
|
+
* @csspart value - The chosen files or placeholder text for the file input.
|
|
2020
|
+
* @csspart droparea - The element wrapping the drop zone.
|
|
2021
|
+
* @csspart droparea-background - The background of the drop zone.
|
|
2022
|
+
* @csspart droparea-icon - The container that wraps the icon for the drop zone.
|
|
2023
|
+
* @csspart droparea-value - The text for the drop zone.
|
|
2024
|
+
* @csspart trigger - The container that wraps the trigger.
|
|
2025
|
+
*
|
|
2026
|
+
* @animation file.iconDrop - The animation to use for the file icon
|
|
2027
|
+
* when a file is dropped
|
|
2028
|
+
* @animation file.text.disappear - The disappear animation to use for the file placeholder text
|
|
2029
|
+
* when a file is dropped
|
|
2030
|
+
* @animation file.text.appear - The appear animation to use for the file placeholder text
|
|
2031
|
+
* when a file is dropped
|
|
2032
|
+
*/ 'syn-file': SynFileJSXElement;
|
|
2033
|
+
/**
|
|
2034
|
+
* @summary The <syn-header /> element provides a generic application header
|
|
2035
|
+
* that can be used to add applications name, toolbar and primary navigation.
|
|
2036
|
+
*
|
|
2037
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs
|
|
2038
|
+
* @status stable
|
|
2039
|
+
* @since 1.10.0
|
|
2040
|
+
*
|
|
2041
|
+
* @slot label - The label for the header
|
|
2042
|
+
* @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided
|
|
2043
|
+
* @slot meta-navigation - The meta-navigation is used to add various application toolbar icons
|
|
2044
|
+
* Best used with `<syn-icon-button />` and `<syn-drop-down />`
|
|
2045
|
+
* @slot navigation - This slot can be used to add an optional horizontal navigation
|
|
2046
|
+
* @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.
|
|
2047
|
+
* The default close icon is a 'x'.
|
|
2048
|
+
* @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.
|
|
2049
|
+
* The default open icon is a burger menu.
|
|
2050
|
+
*
|
|
2051
|
+
* @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed
|
|
2052
|
+
* @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden
|
|
2053
|
+
* @event syn-burger-menu-open - Emitted when the burger menu is toggled to open
|
|
2054
|
+
*
|
|
2055
|
+
* @csspart base - The component's base wrapper
|
|
2056
|
+
* @csspart content - The wrapper most content items reside
|
|
2057
|
+
* @csspart logo - The wrapper the application logo resides in
|
|
2058
|
+
* @csspart label - The element wrapping the application name
|
|
2059
|
+
* @csspart meta-navigation - The Item wrapping the optional application menu
|
|
2060
|
+
* @csspart navigation - The wrapper that is holding the optional top navigation section
|
|
2061
|
+
* @csspart burger-menu-toggle-button - The button that toggles the burger menu
|
|
2062
|
+
*/ 'syn-header': SynHeaderJSXElement;
|
|
2063
|
+
/**
|
|
2064
|
+
* @summary Icons are symbols that can be used to represent various options within an application.
|
|
2065
|
+
* @documentation https://synergy.style/components/icon
|
|
2066
|
+
* @status stable
|
|
2067
|
+
* @since 2.0
|
|
2068
|
+
*
|
|
2069
|
+
* @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
|
|
2070
|
+
* @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
|
|
2071
|
+
*
|
|
2072
|
+
* @csspart svg - The internal SVG element.
|
|
2073
|
+
* @csspart use - The <use> element generated when using `spriteSheet: true`
|
|
2074
|
+
*/ 'syn-icon': SynIconJSXElement;
|
|
2075
|
+
/**
|
|
2076
|
+
* @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
|
|
2077
|
+
* @documentation https://synergy.style/components/icon-button
|
|
2078
|
+
* @status stable
|
|
2079
|
+
* @since 2.0
|
|
2080
|
+
*
|
|
2081
|
+
* @dependency syn-icon
|
|
2082
|
+
*
|
|
2083
|
+
* @event syn-blur - Emitted when the icon button loses focus.
|
|
2084
|
+
* @event syn-focus - Emitted when the icon button gains focus.
|
|
2085
|
+
*
|
|
2086
|
+
* @csspart base - The component's base wrapper.
|
|
2087
|
+
*/ 'syn-icon-button': SynIconButtonJSXElement;
|
|
2088
|
+
/**
|
|
2089
|
+
* @summary Inputs collect data from the user.
|
|
2090
|
+
* @documentation https://synergy.style/components/input
|
|
2091
|
+
* @status stable
|
|
2092
|
+
* @since 2.0
|
|
2093
|
+
*
|
|
2094
|
+
* @dependency syn-icon
|
|
2095
|
+
* @dependency syn-divider
|
|
2096
|
+
*
|
|
2097
|
+
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
|
2098
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the input.
|
|
2099
|
+
* @slot suffix - Used to append a presentational icon or similar element to the input.
|
|
2100
|
+
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
2101
|
+
* @slot show-password-icon - An icon to use in lieu of the default show password icon.
|
|
2102
|
+
* @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
|
|
2103
|
+
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
2104
|
+
* @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.
|
|
2105
|
+
* @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.
|
|
2106
|
+
*
|
|
2107
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
2108
|
+
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
|
|
2109
|
+
* @event syn-clear - Emitted when the clear button is activated.
|
|
2110
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
2111
|
+
* @event syn-input - Emitted when the control receives input.
|
|
2112
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
2113
|
+
*
|
|
2114
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
2115
|
+
* @csspart form-control-label - The label's wrapper.
|
|
2116
|
+
* @csspart form-control-input - The input's wrapper.
|
|
2117
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
2118
|
+
* @csspart base - The component's base wrapper.
|
|
2119
|
+
* @csspart input - The internal `<input>` control.
|
|
2120
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
2121
|
+
* @csspart clear-button - The clear button.
|
|
2122
|
+
* @csspart password-toggle-button - The password toggle button.
|
|
2123
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
2124
|
+
* @csspart stepper - The container that wraps the number stepper.
|
|
2125
|
+
* @csspart decrement-number-stepper - The decrement number stepper button.
|
|
2126
|
+
* @csspart increment-number-stepper - The increment number stepper button.
|
|
2127
|
+
* @csspart divider - The divider between the increment and decrement number stepper buttons.
|
|
2128
|
+
*/ 'syn-input': SynInputJSXElement;
|
|
2129
|
+
/**
|
|
2130
|
+
* @summary Menus provide a list of options for the user to choose from.
|
|
2131
|
+
* @documentation https://synergy.style/components/menu
|
|
2132
|
+
* @status stable
|
|
2133
|
+
* @since 2.0
|
|
2134
|
+
*
|
|
2135
|
+
* @slot - The menu's content, including menu items, menu labels, and dividers.
|
|
2136
|
+
*
|
|
2137
|
+
* @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.
|
|
2138
|
+
*/ 'syn-menu': SynMenuJSXElement;
|
|
2139
|
+
/**
|
|
2140
|
+
* @summary Menu items provide options for the user to pick from in a menu.
|
|
2141
|
+
* @documentation https://synergy.style/components/menu-item
|
|
2142
|
+
* @status stable
|
|
2143
|
+
* @since 2.0
|
|
2144
|
+
*
|
|
2145
|
+
* @dependency syn-icon
|
|
2146
|
+
* @dependency syn-popup
|
|
2147
|
+
* @dependency syn-spinner
|
|
2148
|
+
*
|
|
2149
|
+
* @slot - The menu item's label.
|
|
2150
|
+
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
|
2151
|
+
* @slot suffix - Used to append an icon or similar element to the menu item.
|
|
2152
|
+
* @slot submenu - Used to denote a nested menu.
|
|
2153
|
+
*
|
|
2154
|
+
* @csspart base - The component's base wrapper.
|
|
2155
|
+
* @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
|
|
2156
|
+
* @csspart prefix - The prefix container.
|
|
2157
|
+
* @csspart label - The menu item label.
|
|
2158
|
+
* @csspart suffix - The suffix container.
|
|
2159
|
+
* @csspart spinner - The spinner that shows when the menu item is in the loading state.
|
|
2160
|
+
* @csspart spinner__base - The spinner's base part.
|
|
2161
|
+
* @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
|
|
2162
|
+
*
|
|
2163
|
+
* @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
|
|
2164
|
+
*/ 'syn-menu-item': SynMenuItemJSXElement;
|
|
2165
|
+
/**
|
|
2166
|
+
* @summary Menu labels are used to describe a group of menu items.
|
|
2167
|
+
* @documentation https://synergy.style/components/menu-label
|
|
2168
|
+
* @status stable
|
|
2169
|
+
* @since 2.0
|
|
2170
|
+
*
|
|
2171
|
+
* @dependency syn-divider
|
|
2172
|
+
*
|
|
2173
|
+
* @slot - The menu label's content.
|
|
2174
|
+
*
|
|
2175
|
+
* @csspart base - The component's base wrapper.
|
|
2176
|
+
* @csspart divider - The divider that is displayed above the content
|
|
2177
|
+
* @csspart label - The label that is displayed below the divider
|
|
2178
|
+
*
|
|
2179
|
+
* @cssproperty --display-divider - Display property of the divider. Defaults to "block"
|
|
2180
|
+
*/ 'syn-menu-label': SynMenuLabelJSXElement;
|
|
2181
|
+
/**
|
|
2182
|
+
* @summary Flexible button / link component that can be used to quickly build navigations.
|
|
2183
|
+
* Takes one of 3 forms:
|
|
2184
|
+
* - button (default),
|
|
2185
|
+
* - link (overrides button if a 'href' is provided),
|
|
2186
|
+
* - or accordion (overrides all other if 'children' slot is defined).
|
|
2187
|
+
*
|
|
2188
|
+
* @status stable
|
|
2189
|
+
* @since 1.14.0
|
|
2190
|
+
*
|
|
2191
|
+
* @dependency syn-divider
|
|
2192
|
+
*
|
|
2193
|
+
* @event syn-show - Emitted when the navigation item:
|
|
2194
|
+
* - has children,
|
|
2195
|
+
* - and is clicked while HTML details are hidden.
|
|
2196
|
+
*
|
|
2197
|
+
* @event syn-hide - Emitted when the navigation item:
|
|
2198
|
+
* - has children,
|
|
2199
|
+
* - and is clicked while HTML details are shown.
|
|
2200
|
+
*
|
|
2201
|
+
* @event syn-blur - Emitted when the button loses focus.
|
|
2202
|
+
* @event syn-focus - Emitted when the button gains focus.
|
|
2203
|
+
*
|
|
2204
|
+
* @slot - The navigation item's label.
|
|
2205
|
+
* @slot prefix - A presentational prefix icon or similar element.
|
|
2206
|
+
* @slot suffix - A presentational suffix icon or similar element.
|
|
2207
|
+
* @slot children - Slot used to provide nested child navigation elements.
|
|
2208
|
+
* If provided, details and summary elements will be used.
|
|
2209
|
+
* A chevron will be shown on the right side regardless of the chevron property.
|
|
2210
|
+
*
|
|
2211
|
+
* @csspart base - The component's base wrapper including children.
|
|
2212
|
+
* @csspart children - The wrapper that holds the children
|
|
2213
|
+
* @csspart content-wrapper - The component's content wrapper.
|
|
2214
|
+
* @csspart content - The component's content excluding children.
|
|
2215
|
+
* @csspart current-indicator - The indicator used when current is set to true
|
|
2216
|
+
* @csspart chevron - The container that wraps the chevron.
|
|
2217
|
+
* @csspart details - The details element rendered when there are children available
|
|
2218
|
+
* @csspart divider - The components optional top divider.
|
|
2219
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
2220
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
2221
|
+
*
|
|
2222
|
+
* @cssproperty --indentation - Numeric value, indicating the level the item is placed at.
|
|
2223
|
+
* @cssproperty --indentation-stepping - The amount of pixels each level will indent.
|
|
2224
|
+
* @cssproperty --display-children - Display property of the children. Defaults to "contents"
|
|
2225
|
+
*/ 'syn-nav-item': SynNavItemJSXElement;
|
|
2226
|
+
/**
|
|
2227
|
+
* @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
|
|
2228
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs
|
|
2229
|
+
* @status stable
|
|
2230
|
+
* @since 1.3.0
|
|
2231
|
+
*
|
|
2232
|
+
* @dependency syn-divider
|
|
2233
|
+
*
|
|
2234
|
+
* @slot - The given options. Must be `<syn-option>` elements.
|
|
2235
|
+
* @slot prefix - A presentational prefix icon or similar element.
|
|
2236
|
+
* @slot label - The label for the optgroup
|
|
2237
|
+
* @slot suffix - A presentational suffix icon or similar element.
|
|
2238
|
+
*
|
|
2239
|
+
* @csspart base - The component's base wrapper.
|
|
2240
|
+
* @csspart label-container - The container that wraps prefix, label and base
|
|
2241
|
+
* @csspart divider - The divider that is displayed above the content
|
|
2242
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
2243
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
2244
|
+
* @csspart options - The container that wraps the <syn-option> elements.
|
|
2245
|
+
*
|
|
2246
|
+
* @cssproperty --display-divider - Display property of the divider. Defaults to "block"
|
|
2247
|
+
*/ 'syn-optgroup': SynOptgroupJSXElement;
|
|
2248
|
+
/**
|
|
2249
|
+
* @summary Options define the selectable items within various form controls such as [select](/components/select).
|
|
2250
|
+
* @documentation https://synergy.style/components/option
|
|
2251
|
+
* @status stable
|
|
2252
|
+
* @since 2.0
|
|
2253
|
+
*
|
|
2254
|
+
* @dependency syn-icon
|
|
2255
|
+
*
|
|
2256
|
+
* @slot - The option's label.
|
|
2257
|
+
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
|
2258
|
+
* @slot suffix - Used to append an icon or similar element to the menu item.
|
|
2259
|
+
*
|
|
2260
|
+
* @csspart checked-icon - The checked icon, an `<syn-icon>` element.
|
|
2261
|
+
* @csspart base - The component's base wrapper.
|
|
2262
|
+
* @csspart label - The option's label.
|
|
2263
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
2264
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
2265
|
+
*/ 'syn-option': SynOptionJSXElement;
|
|
2266
|
+
/**
|
|
2267
|
+
* @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
|
|
2268
|
+
* @documentation https://synergy.style/components/popup
|
|
2269
|
+
* @status stable
|
|
2270
|
+
* @since 2.0
|
|
2271
|
+
*
|
|
2272
|
+
* @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
|
|
2273
|
+
* operations in your listener or consider debouncing it.
|
|
2274
|
+
*
|
|
2275
|
+
* @slot - The popup's content.
|
|
2276
|
+
* @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
|
|
2277
|
+
* `anchor` attribute or property instead.
|
|
2278
|
+
*
|
|
2279
|
+
* @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
|
|
2280
|
+
* assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
|
|
2281
|
+
* maybe a border or box shadow.
|
|
2282
|
+
* @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
|
|
2283
|
+
* @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
|
|
2284
|
+
*
|
|
2285
|
+
* @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
|
|
2286
|
+
* attribute is used.
|
|
2287
|
+
* @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.
|
|
2288
|
+
* @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
|
|
2289
|
+
* popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
|
|
2290
|
+
* available when using `auto-size`.
|
|
2291
|
+
* @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
|
|
2292
|
+
* popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
|
|
2293
|
+
* available when using `auto-size`.
|
|
2294
|
+
*/ 'syn-popup': SynPopupJSXElement;
|
|
2295
|
+
/**
|
|
2296
|
+
* @summary The `<syn-prio-nav />` element provides a generic navigation bar
|
|
2297
|
+
* that can be used to group multiple navigation items (usually horizontal `<syn-nav-item />`s)
|
|
2298
|
+
* together. It will automatically group all items not visible in the viewport into a custom
|
|
2299
|
+
* priority menu.
|
|
2300
|
+
*
|
|
2301
|
+
* @example
|
|
2302
|
+
* <syn-prio-nav>
|
|
2303
|
+
* <syn-nav-item current horizontal>Item 1</syn-nav-item>
|
|
2304
|
+
* <button role="menuitem">Item 2 (custom)</button>
|
|
2305
|
+
* <syn-nav-item horizontal>Item 3</syn-nav-item>
|
|
2306
|
+
* </syn-prio-nav>
|
|
2307
|
+
*
|
|
2308
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
|
|
2309
|
+
* @status stable
|
|
2310
|
+
* @since 1.14.0
|
|
2311
|
+
*
|
|
2312
|
+
* @dependency syn-dropdown
|
|
2313
|
+
* @dependency syn-icon
|
|
2314
|
+
* @dependency syn-menu
|
|
2315
|
+
* @dependency syn-nav-item
|
|
2316
|
+
*
|
|
2317
|
+
* @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s
|
|
2318
|
+
* or have a role of "menuitem"
|
|
2319
|
+
*
|
|
2320
|
+
* @csspart base - The component's base wrapper.
|
|
2321
|
+
* @csspart priority-menu - The wrapper around the priority menu
|
|
2322
|
+
* @csspart priority-menu-nav-item - The navigation item for the priority menu
|
|
2323
|
+
* @csspart priority-menu-label - The label for the priority menu
|
|
2324
|
+
* @csspart priority-menu-icon - The icon for the priority menu
|
|
2325
|
+
* @csspart priority-menu-container - The container for the shifted navigation items,
|
|
2326
|
+
* if there is not enough space.
|
|
2327
|
+
*
|
|
2328
|
+
*/ 'syn-prio-nav': SynPrioNavJSXElement;
|
|
2329
|
+
/**
|
|
2330
|
+
* @summary Progress bars are used to show the status of an ongoing operation.
|
|
2331
|
+
* @documentation https://synergy.style/components/progress-bar
|
|
2332
|
+
* @status stable
|
|
2333
|
+
* @since 2.0
|
|
2334
|
+
*
|
|
2335
|
+
* @slot - A label to show inside the progress indicator.
|
|
2336
|
+
*
|
|
2337
|
+
* @csspart base - The component's base wrapper.
|
|
2338
|
+
* @csspart indicator - The progress bar's indicator.
|
|
2339
|
+
* @csspart label - The progress bar's label.
|
|
2340
|
+
*
|
|
2341
|
+
* @cssproperty --height - The progress bar's height.
|
|
2342
|
+
* @cssproperty --track-color - The color of the track.
|
|
2343
|
+
* @cssproperty --indicator-color - The color of the indicator.
|
|
2344
|
+
* @cssproperty --label-color - The color of the label.
|
|
2345
|
+
* @cssproperty --speed - The speed of the progress bar when in indeterminate state.
|
|
2346
|
+
*/ 'syn-progress-bar': SynProgressBarJSXElement;
|
|
2347
|
+
/**
|
|
2348
|
+
* @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
|
2349
|
+
* @documentation https://synergy.style/components/progress-ring
|
|
2350
|
+
* @status stable
|
|
2351
|
+
* @since 2.0
|
|
2352
|
+
*
|
|
2353
|
+
* @slot - A label to show inside the ring.
|
|
2354
|
+
*
|
|
2355
|
+
* @csspart base - The component's base wrapper.
|
|
2356
|
+
* @csspart label - The progress ring label.
|
|
2357
|
+
*
|
|
2358
|
+
* @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
|
|
2359
|
+
* @cssproperty --track-width - The width of the track.
|
|
2360
|
+
* @cssproperty --track-color - The color of the track.
|
|
2361
|
+
* @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
|
|
2362
|
+
* @cssproperty --indicator-color - The color of the indicator.
|
|
2363
|
+
* @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
|
|
2364
|
+
*/ 'syn-progress-ring': SynProgressRingJSXElement;
|
|
2365
|
+
/**
|
|
2366
|
+
* @summary Radios allow the user to select a single option from a group.
|
|
2367
|
+
* @documentation https://synergy.style/components/radio
|
|
2368
|
+
* @status stable
|
|
2369
|
+
* @since 2.0
|
|
2370
|
+
*
|
|
2371
|
+
* @dependency syn-icon
|
|
2372
|
+
*
|
|
2373
|
+
* @slot - The radio's label.
|
|
2374
|
+
*
|
|
2375
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
2376
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
2377
|
+
*
|
|
2378
|
+
* @csspart base - The component's base wrapper.
|
|
2379
|
+
* @csspart control - The circular container that wraps the radio's checked state.
|
|
2380
|
+
* @csspart control--checked - The radio control when the radio is checked.
|
|
2381
|
+
* @csspart checked-icon - The checked icon, an `<syn-icon>` element.
|
|
2382
|
+
* @csspart label - The container that wraps the radio's label.
|
|
2383
|
+
*/ 'syn-radio': SynRadioJSXElement;
|
|
2384
|
+
/**
|
|
2385
|
+
* @summary Radios buttons allow the user to select a single option from a group using a button-like control.
|
|
2386
|
+
* @documentation https://synergy.style/components/radio-button
|
|
2387
|
+
* @status stable
|
|
2388
|
+
* @since 2.0
|
|
2389
|
+
*
|
|
2390
|
+
* @slot - The radio button's label.
|
|
2391
|
+
* @slot prefix - A presentational prefix icon or similar element.
|
|
2392
|
+
* @slot suffix - A presentational suffix icon or similar element.
|
|
2393
|
+
*
|
|
2394
|
+
* @event syn-blur - Emitted when the button loses focus.
|
|
2395
|
+
* @event syn-focus - Emitted when the button gains focus.
|
|
2396
|
+
*
|
|
2397
|
+
* @csspart base - The component's base wrapper.
|
|
2398
|
+
* @csspart button - The internal `<button>` element.
|
|
2399
|
+
* @csspart button--checked - The internal button element when the radio button is checked.
|
|
2400
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
2401
|
+
* @csspart label - The container that wraps the radio button's label.
|
|
2402
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
2403
|
+
*/ 'syn-radio-button': SynRadioButtonJSXElement;
|
|
2404
|
+
/**
|
|
2405
|
+
* @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
|
|
2406
|
+
* @documentation https://synergy.style/components/radio-group
|
|
2407
|
+
* @status stable
|
|
2408
|
+
* @since 2.0
|
|
2409
|
+
*
|
|
2410
|
+
* @dependency syn-button-group
|
|
2411
|
+
*
|
|
2412
|
+
* @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
|
|
2413
|
+
* @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
|
|
2414
|
+
* attribute.
|
|
2415
|
+
* @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
|
|
2416
|
+
*
|
|
2417
|
+
* @event syn-change - Emitted when the radio group's selected value changes.
|
|
2418
|
+
* @event syn-input - Emitted when the radio group receives user input.
|
|
2419
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
2420
|
+
*
|
|
2421
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
2422
|
+
* @csspart form-control-label - The label's wrapper.
|
|
2423
|
+
* @csspart form-control-input - The input's wrapper.
|
|
2424
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
2425
|
+
* @csspart button-group - The button group that wraps radio buttons.
|
|
2426
|
+
* @csspart button-group__base - The button group's `base` part.
|
|
2427
|
+
*/ 'syn-radio-group': SynRadioGroupJSXElement;
|
|
2428
|
+
/**
|
|
2429
|
+
* @summary Ranges allow the user to select values within a given range using one or two thumbs.
|
|
2430
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
|
|
2431
|
+
* @status stable
|
|
2432
|
+
*
|
|
2433
|
+
* @dependency syn-tooltip
|
|
2434
|
+
*
|
|
2435
|
+
* @slot label - The range's label. Alternatively, you can use the `label` attribute.
|
|
2436
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the range.
|
|
2437
|
+
* @slot suffix - Used to append a presentational icon or similar element to the range.
|
|
2438
|
+
* @slot help-text - Text that describes how to use the range.
|
|
2439
|
+
* Alternatively, you can use the `help-text` attribute.
|
|
2440
|
+
* @slot ticks - Used to display tick marks at specific intervals along the range.
|
|
2441
|
+
*
|
|
2442
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
2443
|
+
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
|
|
2444
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
2445
|
+
* @event syn-input - Emitted when the control receives input.
|
|
2446
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity
|
|
2447
|
+
* and its constraints aren't satisfied.
|
|
2448
|
+
* @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
|
|
2449
|
+
* Use `Event.preventDefault()` to prevent movement.
|
|
2450
|
+
*
|
|
2451
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
2452
|
+
* @csspart form-control-label - The label's wrapper.
|
|
2453
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
2454
|
+
* @csspart base - The component's base wrapper.
|
|
2455
|
+
* @csspart input-wrapper - The container that wraps the input track and ticks.
|
|
2456
|
+
* @csspart track-wrapper - The wrapper for the track.
|
|
2457
|
+
* @csspart track - The inactive track.
|
|
2458
|
+
* @csspart active-track - The active track.
|
|
2459
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
2460
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
2461
|
+
* @csspart ticks - The container that wraps the tick marks.
|
|
2462
|
+
* @csspart thumb - The thumb(s) that the user can drag to change the range.
|
|
2463
|
+
*
|
|
2464
|
+
* @csspart tooltip__base - The base of the tooltip
|
|
2465
|
+
* @csspart tooltip__arrow - The arrow of the tooltip
|
|
2466
|
+
* @csspart tooltip__popup - The popup of the tooltip
|
|
2467
|
+
* @csspart tooltip__body - The body of the tooltip
|
|
2468
|
+
*
|
|
2469
|
+
* @cssproperty --thumb-size - The size of a thumb.
|
|
2470
|
+
* @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
|
|
2471
|
+
* Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
|
|
2472
|
+
* @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
|
|
2473
|
+
* @cssproperty --track-color-active - Color of the track representing the current value.
|
|
2474
|
+
* @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
|
|
2475
|
+
* @cssproperty --track-height - The height of the track.
|
|
2476
|
+
* @cssproperty --track-active-offset - The point of origin of the active track,
|
|
2477
|
+
* starting at the left side of the range.
|
|
2478
|
+
*/ 'syn-range': SynRangeJSXElement;
|
|
2479
|
+
/**
|
|
2480
|
+
* @summary Ticks visually improve positioning on range sliders.
|
|
2481
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
|
|
2482
|
+
* @status stable
|
|
2483
|
+
*
|
|
2484
|
+
* @slot - The tick's label
|
|
2485
|
+
*
|
|
2486
|
+
* @csspart base - The component's base wrapper.
|
|
2487
|
+
* @csspart label - The component's label.
|
|
2488
|
+
* @csspart line - The component's tick line.
|
|
2489
|
+
*
|
|
2490
|
+
* @cssproperty --tick-height - The height of the tick marker.
|
|
2491
|
+
* @cssproperty --tick-label-top - The top offset of the tick label.
|
|
2492
|
+
*/ 'syn-range-tick': SynRangeTickJSXElement;
|
|
2493
|
+
/**
|
|
2494
|
+
* @summary Selects allow you to choose items from a menu of predefined options.
|
|
2495
|
+
* @documentation https://synergy.style/components/select
|
|
2496
|
+
* @status stable
|
|
2497
|
+
* @since 2.0
|
|
2498
|
+
*
|
|
2499
|
+
* @dependency syn-icon
|
|
2500
|
+
* @dependency syn-popup
|
|
2501
|
+
* @dependency syn-tag
|
|
2502
|
+
*
|
|
2503
|
+
* @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.
|
|
2504
|
+
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
|
2505
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
|
|
2506
|
+
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
|
|
2507
|
+
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
2508
|
+
* @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
|
|
2509
|
+
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
2510
|
+
*
|
|
2511
|
+
* @event syn-change - Emitted when the control's value changes.
|
|
2512
|
+
* @event syn-clear - Emitted when the control's value is cleared.
|
|
2513
|
+
* @event syn-input - Emitted when the control receives input.
|
|
2514
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
2515
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
2516
|
+
* @event syn-show - Emitted when the select's menu opens.
|
|
2517
|
+
* @event syn-after-show - Emitted after the select's menu opens and all animations are complete.
|
|
2518
|
+
* @event syn-hide - Emitted when the select's menu closes.
|
|
2519
|
+
* @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.
|
|
2520
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
2521
|
+
*
|
|
2522
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
2523
|
+
* @csspart form-control-label - The label's wrapper.
|
|
2524
|
+
* @csspart form-control-input - The select's wrapper.
|
|
2525
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
2526
|
+
* @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
|
|
2527
|
+
* @csspart prefix - The container that wraps the prefix slot.
|
|
2528
|
+
* @csspart suffix - The container that wraps the suffix slot.
|
|
2529
|
+
* @csspart display-input - The element that displays the selected option's label, an `<input>` element.
|
|
2530
|
+
* @csspart listbox - The listbox container where options are slotted.
|
|
2531
|
+
* @csspart tags - The container that houses option tags when `multiselect` is used.
|
|
2532
|
+
* @csspart tag - The individual tags that represent each multiselect option.
|
|
2533
|
+
* @csspart tag__base - The tag's base part.
|
|
2534
|
+
* @csspart tag__content - The tag's content part.
|
|
2535
|
+
* @csspart tag__remove-button - The tag's remove button.
|
|
2536
|
+
* @csspart tag__remove-button__base - The tag's remove button base part.
|
|
2537
|
+
* @csspart clear-button - The clear button.
|
|
2538
|
+
* @csspart expand-icon - The container that wraps the expand icon.
|
|
2539
|
+
*/ 'syn-select': SynSelectJSXElement;
|
|
2540
|
+
/**
|
|
2541
|
+
* @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
|
|
2542
|
+
* It can be used to group multiple navigation items (<syn-nav-item />s) together.
|
|
2543
|
+
*
|
|
2544
|
+
* @example
|
|
2545
|
+
* <syn-side-nav open>
|
|
2546
|
+
* <syn-nav-item >Item 1</syn-nav-item>
|
|
2547
|
+
* <syn-nav-item divider>Item 2</syn-nav-item>
|
|
2548
|
+
* </syn-side-nav>
|
|
2549
|
+
*
|
|
2550
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
|
|
2551
|
+
* @status stable
|
|
2552
|
+
* @since 1.14.0
|
|
2553
|
+
*
|
|
2554
|
+
* @dependency syn-divider
|
|
2555
|
+
* @dependency syn-drawer
|
|
2556
|
+
*
|
|
2557
|
+
* @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
|
|
2558
|
+
* @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
|
|
2559
|
+
* Please avoid having to many nav-items as it can massively influence the user experience.
|
|
2560
|
+
*
|
|
2561
|
+
* @event syn-show - Emitted when the side-nav opens.
|
|
2562
|
+
* @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
|
|
2563
|
+
* @event syn-hide - Emitted when the side-nav closes.
|
|
2564
|
+
* @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
|
|
2565
|
+
*
|
|
2566
|
+
* @csspart base - The components base wrapper
|
|
2567
|
+
* @csspart drawer - The drawer that is used under the hood for creating the side-nav
|
|
2568
|
+
* @csspart content-container - The components main content container
|
|
2569
|
+
* @csspart content - The components main content
|
|
2570
|
+
* @csspart footer-container - The components footer content container
|
|
2571
|
+
* @csspart footer-divider - The components footer divider
|
|
2572
|
+
* @csspart footer - The components footer content
|
|
2573
|
+
* @csspart overlay - The overlay that covers the screen behind the side-nav.
|
|
2574
|
+
*
|
|
2575
|
+
* @cssproperty --side-nav-open-width - The width of the side-nav if in open state
|
|
2576
|
+
*
|
|
2577
|
+
* @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.
|
|
2578
|
+
* @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.
|
|
2579
|
+
* @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.
|
|
2580
|
+
* @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.
|
|
2581
|
+
* @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
|
|
2582
|
+
* @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
|
|
2583
|
+
*/ 'syn-side-nav': SynSideNavJSXElement;
|
|
2584
|
+
/**
|
|
2585
|
+
* @summary Spinners are used to show the progress of an indeterminate operation.
|
|
2586
|
+
* @documentation https://synergy.style/components/spinner
|
|
2587
|
+
* @status stable
|
|
2588
|
+
* @since 2.0
|
|
2589
|
+
*
|
|
2590
|
+
* @csspart base - The component's base wrapper.
|
|
2591
|
+
*
|
|
2592
|
+
* @cssproperty --track-width - The width of the track.
|
|
2593
|
+
* @cssproperty --indicator-color - The color of the spinner's indicator.
|
|
2594
|
+
* @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
|
|
2595
|
+
*/ 'syn-spinner': SynSpinnerJSXElement;
|
|
2596
|
+
/**
|
|
2597
|
+
* @summary Switches allow the user to toggle an option on or off.
|
|
2598
|
+
* @documentation https://synergy.style/components/switch
|
|
2599
|
+
* @status stable
|
|
2600
|
+
* @since 2.0
|
|
2601
|
+
*
|
|
2602
|
+
* @slot - The switch's label.
|
|
2603
|
+
* @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
|
|
2604
|
+
*
|
|
2605
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
2606
|
+
* @event syn-change - Emitted when the control's checked state changes.
|
|
2607
|
+
* @event syn-input - Emitted when the control receives input.
|
|
2608
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
2609
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
2610
|
+
*
|
|
2611
|
+
* @csspart base - The component's base wrapper.
|
|
2612
|
+
* @csspart control - The control that houses the switch's thumb.
|
|
2613
|
+
* @csspart thumb - The switch's thumb.
|
|
2614
|
+
* @csspart label - The switch's label.
|
|
2615
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
2616
|
+
*
|
|
2617
|
+
* @cssproperty --width - The width of the switch.
|
|
2618
|
+
* @cssproperty --height - The height of the switch.
|
|
2619
|
+
* @cssproperty --thumb-size - The size of the thumb.
|
|
2620
|
+
*/ 'syn-switch': SynSwitchJSXElement;
|
|
2621
|
+
/**
|
|
2622
|
+
* @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
|
|
2623
|
+
* @documentation https://synergy.style/components/tab
|
|
2624
|
+
* @status stable
|
|
2625
|
+
* @since 2.0
|
|
2626
|
+
*
|
|
2627
|
+
* @dependency syn-icon-button
|
|
2628
|
+
*
|
|
2629
|
+
* @slot - The tab's label.
|
|
2630
|
+
*
|
|
2631
|
+
* @event syn-close - Emitted when the tab is closable and the close button is activated.
|
|
2632
|
+
*
|
|
2633
|
+
* @csspart base - The component's base wrapper.
|
|
2634
|
+
* @csspart close-button - The close button, an `<syn-icon-button>`.
|
|
2635
|
+
* @csspart close-button__base - The close button's exported `base` part.
|
|
2636
|
+
*/ 'syn-tab': SynTabJSXElement;
|
|
2637
|
+
/**
|
|
2638
|
+
* @summary Tab groups organize content into a container that shows one section at a time.
|
|
2639
|
+
* @documentation https://synergy.style/components/tab-group
|
|
2640
|
+
* @status stable
|
|
2641
|
+
* @since 2.0
|
|
2642
|
+
*
|
|
2643
|
+
* @dependency syn-icon-button
|
|
2644
|
+
*
|
|
2645
|
+
* @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
|
|
2646
|
+
* @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
|
|
2647
|
+
*
|
|
2648
|
+
* @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
|
|
2649
|
+
* @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
|
|
2650
|
+
*
|
|
2651
|
+
* @csspart base - The component's base wrapper.
|
|
2652
|
+
* @csspart nav - The tab group's navigation container where tabs are slotted in.
|
|
2653
|
+
* @csspart tabs - The container that wraps the tabs.
|
|
2654
|
+
* @csspart active-tab-indicator - The line that highlights the currently selected tab.
|
|
2655
|
+
* @csspart body - The tab group's body where tab panels are slotted in.
|
|
2656
|
+
* @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
|
|
2657
|
+
* @csspart scroll-button--start - The starting scroll button.
|
|
2658
|
+
* @csspart scroll-button--end - The ending scroll button.
|
|
2659
|
+
* @csspart scroll-button__base - The scroll button's exported `base` part.
|
|
2660
|
+
*
|
|
2661
|
+
* @cssproperty --indicator-color - The color of the active tab indicator.
|
|
2662
|
+
* @cssproperty --indicator-width - The width of the active tab indicator.
|
|
2663
|
+
* @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
|
|
2664
|
+
* @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
|
|
2665
|
+
*/ 'syn-tab-group': SynTabGroupJSXElement;
|
|
2666
|
+
/**
|
|
2667
|
+
* @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
|
|
2668
|
+
* @documentation https://synergy.style/components/tab-panel
|
|
2669
|
+
* @status stable
|
|
2670
|
+
* @since 2.0
|
|
2671
|
+
*
|
|
2672
|
+
* @slot - The tab panel's content.
|
|
2673
|
+
*
|
|
2674
|
+
* @csspart base - The component's base wrapper.
|
|
2675
|
+
*
|
|
2676
|
+
* @cssproperty --padding - The tab panel's padding.
|
|
2677
|
+
*/ 'syn-tab-panel': SynTabPanelJSXElement;
|
|
2678
|
+
/**
|
|
2679
|
+
* @summary Tags are used as labels to organize things or to indicate a selection.
|
|
2680
|
+
* @documentation https://synergy.style/components/tag
|
|
2681
|
+
* @status stable
|
|
2682
|
+
* @since 2.0
|
|
2683
|
+
*
|
|
2684
|
+
* @dependency syn-icon-button
|
|
2685
|
+
*
|
|
2686
|
+
* @slot - The tag's content.
|
|
2687
|
+
*
|
|
2688
|
+
* @event syn-remove - Emitted when the remove button is activated.
|
|
2689
|
+
*
|
|
2690
|
+
* @csspart base - The component's base wrapper.
|
|
2691
|
+
* @csspart content - The tag's content.
|
|
2692
|
+
* @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.
|
|
2693
|
+
* @csspart remove-button__base - The remove button's exported `base` part.
|
|
2694
|
+
*/ 'syn-tag': SynTagJSXElement;
|
|
2695
|
+
/**
|
|
2696
|
+
* @summary Textareas collect data from the user and allow multiple lines of text.
|
|
2697
|
+
* @documentation https://synergy.style/components/textarea
|
|
2698
|
+
* @status stable
|
|
2699
|
+
* @since 2.0
|
|
2700
|
+
*
|
|
2701
|
+
* @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
|
|
2702
|
+
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
2703
|
+
*
|
|
2704
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
2705
|
+
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
|
|
2706
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
2707
|
+
* @event syn-input - Emitted when the control receives input.
|
|
2708
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
2709
|
+
*
|
|
2710
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
2711
|
+
* @csspart form-control-label - The label's wrapper.
|
|
2712
|
+
* @csspart form-control-input - The input's wrapper.
|
|
2713
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
2714
|
+
* @csspart base - The component's base wrapper.
|
|
2715
|
+
* @csspart textarea - The internal `<textarea>` control.
|
|
2716
|
+
*/ 'syn-textarea': SynTextareaJSXElement;
|
|
2717
|
+
/**
|
|
2718
|
+
* @summary Tooltips display additional information based on a specific action.
|
|
2719
|
+
* @documentation https://synergy.style/components/tooltip
|
|
2720
|
+
* @status stable
|
|
2721
|
+
* @since 2.0
|
|
2722
|
+
*
|
|
2723
|
+
* @dependency syn-popup
|
|
2724
|
+
*
|
|
2725
|
+
* @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
|
|
2726
|
+
* @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
|
|
2727
|
+
*
|
|
2728
|
+
* @event syn-show - Emitted when the tooltip begins to show.
|
|
2729
|
+
* @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.
|
|
2730
|
+
* @event syn-hide - Emitted when the tooltip begins to hide.
|
|
2731
|
+
* @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.
|
|
2732
|
+
*
|
|
2733
|
+
* @csspart base - The component's base wrapper, an `<syn-popup>` element.
|
|
2734
|
+
* @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
|
|
2735
|
+
* @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
|
|
2736
|
+
* @csspart body - The tooltip's body where its content is rendered.
|
|
2737
|
+
*
|
|
2738
|
+
* @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
|
|
2739
|
+
* @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
|
|
2740
|
+
* @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
|
|
2741
|
+
*
|
|
2742
|
+
* @animation tooltip.show - The animation to use when showing the tooltip.
|
|
2743
|
+
* @animation tooltip.hide - The animation to use when hiding the tooltip.
|
|
2744
|
+
*/ 'syn-tooltip': SynTooltipJSXElement;
|
|
2745
|
+
/**
|
|
2746
|
+
* @summary Validate provides form field validation messages in a unified way.
|
|
2747
|
+
* It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
|
|
2748
|
+
* and showing the validation message in a consistent, user defined way.
|
|
2749
|
+
*
|
|
2750
|
+
* @dependency syn-alert
|
|
2751
|
+
*
|
|
2752
|
+
* @slot - The form field that should be validated.
|
|
2753
|
+
* Avoid slotting in more than one element, as subsequent ones will be ignored.
|
|
2754
|
+
*
|
|
2755
|
+
* @csspart base - The component's base wrapper.
|
|
2756
|
+
* @csspart input-wrapper - The container that wraps the form field.
|
|
2757
|
+
* @csspart alert - The syn-alert that is shown when the variant is set to "inline".
|
|
2758
|
+
* @csspart alert__base - The container that wraps the alert.
|
|
2759
|
+
* @csspart alert__message - The container that wraps the alert message.
|
|
2760
|
+
* @csspart alert__icon - The container that wraps the alert icon.
|
|
2761
|
+
*/ 'syn-validate': SynValidateJSXElement;
|
|
2762
|
+
}
|
|
2763
|
+
}
|
|
2764
|
+
}
|
|
2765
|
+
export {};
|