@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/full/setup/setup:react-package/react/syn-jsx-elements.ts

@@ -0,0 +1,2830 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+/* eslint-disable */
+
+import type { CSSProperties, DOMAttributes, RefObject } from 'react';
+import type {
+  SynShowEvent,
+  SynAfterShowEvent,
+  SynHideEvent,
+  SynAfterHideEvent,
+  SynBlurEvent,
+  SynFocusEvent,
+  SynInvalidEvent,
+  SynChangeEvent,
+  SynInputEvent,
+  SynClearEvent,
+  SynErrorEvent,
+  SynInitialFocusEvent,
+  SynRequestCloseEvent,
+  SynBurgerMenuClosedEvent,
+  SynBurgerMenuHiddenEvent,
+  SynBurgerMenuOpenEvent,
+  SynLoadEvent,
+  SynClampEvent,
+  SynSelectEvent,
+  SynPaginationPageChangedEvent,
+  SynPaginationPageSizeChangedEvent,
+  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,
+  SynPagination,
+  SynPopup,
+  SynPrioNav,
+  SynProgressBar,
+  SynProgressRing,
+  SynRadio,
+  SynRadioButton,
+  SynRadioGroup,
+  SynRange,
+  SynRangeTick,
+  SynSelect,
+  SynSideNav,
+  SynSpinner,
+  SynSwitch,
+  SynTab,
+  SynTabGroup,
+  SynTabPanel,
+  SynTag,
+  SynTagGroup,
+  SynTextarea,
+  SynTooltip,
+  SynValidate,
+} from '@synergy-design-system/components';
+
+/**
+ * Used core types
+ * @see https://coryrylan.com/blog/how-to-use-web-components-with-typescript-and-react
+ */
+
+type SynEventTuple = [string, unknown];
+
+type SynEventMap<T extends SynEventTuple[]> = {
+  [K in T[number] as `on${K[0]}`]: (event: K[1]) => void;
+};
+
+/**
+ * Synergy custom element type definition
+ * This type is used to define the custom elements in the Synergy Design System
+ */
+export type SynCustomElement<
+  SynElement extends HTMLElement,
+  Events extends SynEventTuple[] = [],
+> = Partial<
+  Omit<SynElement, 'style'> &
+    DOMAttributes<SynElement> & {
+      children?: any;
+      key?: any;
+      ref?: RefObject<SynElement | null>;
+      style?: CSSProperties | undefined;
+    } & SynEventMap<Events>
+>;
+
+/**
+ * @summary Accordions provide the ability to group a list of `<syn-details>`.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
+ * @status stable
+ * @since 1.23.0
+ *
+ * @slot - The accordion's main content. Must be `<syn-details />` elements.
+ *
+ * @csspart base - The component's base wrapper.
+ */ export type SynAccordionJSXElement = SynCustomElement<SynAccordion, []>;
+/**
+ * @summary Alerts are used to display important messages inline or as toast notifications.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The alert's main content.
+ * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
+ *
+ * @event syn-show - Emitted when the alert opens.
+ * @event syn-after-show - Emitted after the alert opens and all animations are complete.
+ * @event syn-hide - Emitted when the alert closes.
+ * @event syn-after-hide - Emitted after the alert closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart icon - The container that wraps the optional icon.
+ * @csspart message - The container that wraps the alert's main content.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ *
+ * @animation alert.show - The animation to use when showing the alert.
+ * @animation alert.hide - The animation to use when hiding the alert.
+ */ export type SynAlertJSXElement = SynCustomElement<
+  SynAlert,
+  [
+    ['syn-show', SynShowEvent],
+    ['syn-after-show', SynAfterShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-after-hide', SynAfterHideEvent],
+  ]
+>;
+/**
+ * @summary Badges are used to draw attention and display statuses or counts.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The badge's content.
+ *
+ * @csspart base - The component's base wrapper.
+ */ export type SynBadgeJSXElement = SynCustomElement<SynBadge, []>;
+/**
+ * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - One or more breadcrumb items to display.
+ * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
+ *
+ * @dependency syn-icon
+ *
+ * @csspart base - The component's base wrapper.
+ */ export type SynBreadcrumbJSXElement = SynCustomElement<SynBreadcrumb, []>;
+/**
+ * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The breadcrumb item's label.
+ * @slot prefix - An optional prefix, usually an icon or icon button.
+ * @slot suffix - An optional suffix, usually an icon or icon button.
+ * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
+ * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The breadcrumb item's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart separator - The container that wraps the separator.
+ */ export type SynBreadcrumbItemJSXElement = SynCustomElement<
+  SynBreadcrumbItem,
+  []
+>;
+/**
+ * @summary Buttons represent actions that are available to the user.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-spinner
+ *
+ * @event syn-blur - Emitted when the button loses focus.
+ * @event syn-focus - Emitted when the button gains focus.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @slot - The button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart caret - The button's caret icon, an `<syn-icon>` element.
+ * @csspart spinner - The spinner that shows when the button is in the loading state.
+ */ export type SynButtonJSXElement = SynCustomElement<
+  SynButton,
+  [
+    ['syn-blur', SynBlurEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-invalid', SynInvalidEvent],
+  ]
+>;
+/**
+ * @summary Button groups can be used to group related buttons into sections.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - One or more `<syn-button>` elements to display in the button group.
+ *
+ * @csspart base - The component's base wrapper.
+ */ export type SynButtonGroupJSXElement = SynCustomElement<SynButtonGroup, []>;
+/**
+ * @summary Cards can be used to group related subjects in a container.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The card's main content.
+ * @slot header - An optional header for the card.
+ * @slot footer - An optional footer for the card.
+ * @slot image - An optional image to render at the start of the card.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart image - The container that wraps the card's image.
+ * @csspart header - The container that wraps the card's header.
+ * @csspart body - The container that wraps the card's main content.
+ * @csspart footer - The container that wraps the card's footer.
+ *
+ * @cssproperty --border-color - The card's border color, including borders that occur inside the card.
+ * @cssproperty --border-radius - The border radius for the card's edges.
+ * @cssproperty --border-width - The width of the card's borders.
+ * @cssproperty --padding - The padding to use for the card's sections.
+ */ export type SynCardJSXElement = SynCustomElement<SynCard, []>;
+/**
+ * @summary Checkboxes allow the user to toggle an option on or off.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The checkbox's label.
+ * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-blur - Emitted when the checkbox loses focus.
+ * @event syn-change - Emitted when the checked state changes.
+ * @event syn-focus - Emitted when the checkbox gains focus.
+ * @event syn-input - Emitted when the checkbox receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The square container that wraps the checkbox's checked state.
+ * @csspart control--checked - Matches the control part when the checkbox is checked.
+ * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.
+ * @csspart label - The container that wraps the checkbox's label.
+ * @csspart form-control-help-text - The help text's wrapper.
+ */ export type SynCheckboxJSXElement = SynCustomElement<
+  SynCheckbox,
+  [
+    ['syn-blur', SynBlurEvent],
+    ['syn-change', SynChangeEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-invalid', SynInvalidEvent],
+  ]
+>;
+/**
+ * @summary A combobox component that combines the functionality of a text input with a dropdown listbox,
+ * allowing users to either select from predefined options or enter custom values (when not restricted).
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
+ * @status stable
+ *
+ * @dependency syn-icon
+ * @dependency syn-popup
+ * @dependency syn-tag
+ *
+ * @slot - The listbox options. Must be `<syn-option>` elements.
+ *    You can use `<syn-optgroup>`'s to group items visually.
+ * @slot label - The combobox's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot expand-icon - The icon to show when the control is expanded and collapsed.
+ *    Rotates on open and close.
+ * @slot help-text - Text that describes how to use the combobox.
+ *    Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-change - Emitted when the control's value changes.
+ * @event syn-clear - Emitted when the control's value is cleared.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-show - Emitted when the combobox's menu opens.
+ * @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.
+ * @event syn-hide - Emitted when the combobox's menu closes.
+ * @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.
+ * @event syn-invalid - Emitted when the form control has been checked for validity
+ *    and its constraints aren't satisfied.
+ * @event syn-error - Emitted when the combobox menu fails to open.
+ *
+ * @csspart form-control - The form control that wraps the label, combobox, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The combobox's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart combobox - The container that wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
+ * @csspart display-input - The element that displays the selected option's label,
+ *     an `<input>` element.
+ * @csspart listbox - The listbox container where the options are slotted
+ *   and the filtered options list exists.
+ * @csspart filtered-listbox - The container that wraps the filtered options.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The container that wraps the expand icon.
+ * @csspart popup - The popup's exported `popup` part.
+ * Use this to target the tooltip's popup container.
+ * @csspart no-results - The container that wraps the "no results" message.
+ * @csspart tags - The container that houses option tags when `multiple` is used.
+ * @csspart tag - The individual tags that represent each selected option in `multiple`.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
+ *
+ * @animation combobox.show - The animation to use when showing the combobox.
+ * @animation combobox.hide - The animation to use when hiding the combobox.
+ */ export type SynComboboxJSXElement = SynCustomElement<
+  SynCombobox,
+  [
+    ['syn-change', SynChangeEvent],
+    ['syn-clear', SynClearEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-blur', SynBlurEvent],
+    ['syn-show', SynShowEvent],
+    ['syn-after-show', SynAfterShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-after-hide', SynAfterHideEvent],
+    ['syn-invalid', SynInvalidEvent],
+    ['syn-error', SynErrorEvent],
+  ]
+>;
+/**
+ * @summary Details show a brief summary and expand to show additional content.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The details' main content.
+ * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+ * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.
+ * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.
+ *
+ * @event syn-show - Emitted when the details opens.
+ * @event syn-after-show - Emitted after the details opens and all animations are complete.
+ * @event syn-hide - Emitted when the details closes.
+ * @event syn-after-hide - Emitted after the details closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart header - The header that wraps both the summary and the expand/collapse icon.
+ * @csspart summary - The container that wraps the summary.
+ * @csspart summary-icon - The container that wraps the expand/collapse icons.
+ * @csspart content - The details content.
+ * @csspart body - The container that wraps the details content.
+ *
+ * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
+ * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+ *
+ * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
+ */ export type SynDetailsJSXElement = SynCustomElement<
+  SynDetails,
+  [
+    ['syn-show', SynShowEvent],
+    ['syn-after-show', SynAfterShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-after-hide', SynAfterHideEvent],
+  ]
+>;
+/**
+ * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dialog--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The dialog's main content.
+ * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
+ * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+ * @slot footer - The dialog's footer, usually one or more buttons representing various options.
+ *
+ * @event syn-show - Emitted when the dialog opens.
+ * @event syn-after-show - Emitted after the dialog opens and all animations are complete.
+ * @event syn-hide - Emitted when the dialog closes.
+ * @event syn-after-hide - Emitted after the dialog closes and all animations are complete.
+ * @event syn-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
+ *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
+ *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
+ *   destructive behavior such as data loss.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart overlay - The overlay that covers the screen behind the dialog.
+ * @csspart panel - The dialog's panel (where the dialog and its content are rendered).
+ * @csspart header - The dialog's header. This element wraps the title and header actions.
+ * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+ * @csspart title - The dialog's title.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ * @csspart body - The dialog's body.
+ * @csspart footer - The dialog's footer.
+ *
+ * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
+ * @cssproperty --header-spacing - The amount of padding to use for the header.
+ * @cssproperty --body-spacing - The amount of padding to use for the body.
+ * @cssproperty --footer-spacing - The amount of padding to use for the footer.
+ *
+ * @animation dialog.show - The animation to use when showing the dialog.
+ * @animation dialog.hide - The animation to use when hiding the dialog.
+ * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
+ * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
+ * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
+ *
+ * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
+ *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
+ *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
+ */ export type SynDialogJSXElement = SynCustomElement<
+  SynDialog,
+  [
+    ['syn-show', SynShowEvent],
+    ['syn-after-show', SynAfterShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-after-hide', SynAfterHideEvent],
+    ['syn-initial-focus', SynInitialFocusEvent],
+    ['syn-request-close', SynRequestCloseEvent],
+  ]
+>;
+/**
+ * @summary Dividers are used to visually separate or group elements.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @cssproperty --color - The color of the divider.
+ * @cssproperty --width - The width of the divider.
+ * @cssproperty --spacing - The spacing of the divider.
+ */ export type SynDividerJSXElement = SynCustomElement<SynDivider, []>;
+/**
+ * @summary Drawers slide in from a container to expose additional options and information.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-drawer--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The drawer's main content.
+ * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
+ * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+ * @slot footer - The drawer's footer, usually one or more buttons representing various options.
+ *
+ * @event syn-show - Emitted when the drawer opens.
+ * @event syn-after-show - Emitted after the drawer opens and all animations are complete.
+ * @event syn-hide - Emitted when the drawer closes.
+ * @event syn-after-hide - Emitted after the drawer closes and all animations are complete.
+ * @event syn-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling
+ *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
+ *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
+ *   destructive behavior such as data loss.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart overlay - The overlay that covers the screen behind the drawer.
+ * @csspart panel - The drawer's panel (where the drawer and its content are rendered).
+ * @csspart header - The drawer's header. This element wraps the title and header actions.
+ * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+ * @csspart title - The drawer's title.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ * @csspart body - The drawer's body.
+ * @csspart footer - The drawer's footer.
+ *
+ * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
+ *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
+ * @cssproperty --header-spacing - The amount of padding to use for the header.
+ * @cssproperty --body-spacing - The amount of padding to use for the body.
+ * @cssproperty --footer-spacing - The amount of padding to use for the footer.
+ *
+ * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.
+ * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.
+ * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.
+ * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.
+ * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.
+ * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.
+ * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.
+ * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.
+ * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.
+ * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.
+ * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.
+ *
+ * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
+ *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
+ *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
+ */ export type SynDrawerJSXElement = SynCustomElement<
+  SynDrawer,
+  [
+    ['syn-show', SynShowEvent],
+    ['syn-after-show', SynAfterShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-after-hide', SynAfterHideEvent],
+    ['syn-initial-focus', SynInitialFocusEvent],
+    ['syn-request-close', SynRequestCloseEvent],
+  ]
+>;
+/**
+ * @summary Dropdowns expose additional content that "drops down" in a panel.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-popup
+ *
+ * @slot - The dropdown's main content.
+ * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
+ *
+ * @event syn-show - Emitted when the dropdown opens.
+ * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
+ * @event syn-hide - Emitted when the dropdown closes.
+ * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ * @csspart trigger - The container that wraps the trigger.
+ * @csspart panel - The panel that gets shown when the dropdown is open.
+ *
+ * @animation dropdown.show - The animation to use when showing the dropdown.
+ * @animation dropdown.hide - The animation to use when hiding the dropdown.
+ */ export type SynDropdownJSXElement = SynCustomElement<
+  SynDropdown,
+  [
+    ['syn-show', SynShowEvent],
+    ['syn-after-show', SynAfterShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-after-hide', SynAfterHideEvent],
+  ]
+>;
+/**
+ * @summary File controls allow selecting an arbitrary number of files for uploading.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-file--docs
+ * @status stable
+ *
+ * @dependency syn-button
+ * @dependency syn-icon
+ *
+ * @slot label - The file control's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the file control.
+ *    Alternatively, you can use the `help-text` attribute.
+ * @slot droparea-icon - Optional droparea icon to use instead of the default.
+ *    Works best with `<syn-icon>`.
+ * @slot trigger - Optional content to be used as trigger instead of the default content.
+ *    Opening the file dialog on click and as well as drag and drop will work for this content.
+ *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,
+ *    *hide-value*. Also if using the disabled attribute, the disabled styling will not be
+ *    applied and must be taken care of yourself.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-error - Emitted when multiple files are selected via drag and drop, without
+ * the `multiple` property being set.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart button-wrapper - The wrapper around the button and text value.
+ * @csspart button - The syn-button acting as a file input.
+ * @csspart button__base - The syn-button's exported `base` part.
+ * @csspart value - The chosen files or placeholder text for the file input.
+ * @csspart droparea - The element wrapping the drop zone.
+ * @csspart droparea-background - The background of the drop zone.
+ * @csspart droparea-icon - The container that wraps the icon for the drop zone.
+ * @csspart droparea-value - The text for the drop zone.
+ * @csspart trigger - The container that wraps the trigger.
+ *
+ * @animation file.iconDrop - The animation to use for the file icon
+ * when a file is dropped
+ * @animation file.text.disappear - The disappear animation to use for the file placeholder text
+ * when a file is dropped
+ * @animation file.text.appear - The appear animation to use for the file placeholder text
+ * when a file is dropped
+ */ export type SynFileJSXElement = SynCustomElement<
+  SynFile,
+  [
+    ['syn-blur', SynBlurEvent],
+    ['syn-change', SynChangeEvent],
+    ['syn-error', SynErrorEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-input', SynInputEvent],
+  ]
+>;
+/**
+ * @summary The <syn-header /> element provides a generic application header
+ * that can be used to add applications name, toolbar and primary navigation.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs
+ * @status stable
+ * @since 1.10.0
+ *
+ * @slot label - The label for the header
+ * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided
+ * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons
+ *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`
+ * @slot navigation - This slot can be used to add an optional horizontal navigation
+ * @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.
+ *                      The default close icon is a 'x'.
+ * @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.
+ *                      The default open icon is a burger menu.
+ *
+ * @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed
+ * @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden
+ * @event syn-burger-menu-open - Emitted when the burger menu is toggled to open
+ *
+ * @csspart base - The component's base wrapper
+ * @csspart content - The wrapper most content items reside
+ * @csspart logo - The wrapper the application logo resides in
+ * @csspart label - The element wrapping the application name
+ * @csspart meta-navigation - The Item wrapping the optional application menu
+ * @csspart navigation - The wrapper that is holding the optional top navigation section
+ * @csspart burger-menu-toggle-button - The button that toggles the burger menu
+ *
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
+ */ export type SynHeaderJSXElement = SynCustomElement<
+  SynHeader,
+  [
+    ['syn-burger-menu-closed', SynBurgerMenuClosedEvent],
+    ['syn-burger-menu-hidden', SynBurgerMenuHiddenEvent],
+    ['syn-burger-menu-open', SynBurgerMenuOpenEvent],
+  ]
+>;
+/**
+ * @summary Icons are symbols that can be used to represent various options within an application.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
+ * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
+ *
+ * @csspart svg - The internal SVG element.
+ * @csspart use - The <use> element generated when using `spriteSheet: true`
+ */ export type SynIconJSXElement = SynCustomElement<
+  SynIcon,
+  [['syn-load', SynLoadEvent], ['syn-error', SynErrorEvent]]
+>;
+/**
+ * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @event syn-blur - Emitted when the icon button loses focus.
+ * @event syn-focus - Emitted when the icon button gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ */ export type SynIconButtonJSXElement = SynCustomElement<
+  SynIconButton,
+  [['syn-blur', SynBlurEvent], ['syn-focus', SynFocusEvent]]
+>;
+/**
+ * @summary Inputs collect data from the user.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-divider
+ *
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the input.
+ * @slot suffix - Used to append a presentational icon or similar element to the input.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot show-password-icon - An icon to use in lieu of the default show password icon.
+ * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.
+ * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-clear - Emitted when the clear button is activated.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart input - The internal `<input>` control.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart clear-button - The clear button.
+ * @csspart password-toggle-button - The password toggle button.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart stepper - The container that wraps the number stepper.
+ * @csspart decrement-number-stepper - The decrement number stepper button.
+ * @csspart increment-number-stepper - The increment number stepper button.
+ * @csspart divider - The divider between the increment and decrement number stepper buttons.
+ *
+ * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.
+ * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.
+ * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.
+ * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.
+ */ export type SynInputJSXElement = SynCustomElement<
+  SynInput,
+  [
+    ['syn-blur', SynBlurEvent],
+    ['syn-change', SynChangeEvent],
+    ['syn-clear', SynClearEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-invalid', SynInvalidEvent],
+    ['syn-clamp', SynClampEvent],
+  ]
+>;
+/**
+ * @summary Menus provide a list of options for the user to choose from.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The menu's content, including menu items, menu labels, and dividers.
+ *
+ * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.
+ */ export type SynMenuJSXElement = SynCustomElement<
+  SynMenu,
+  [['syn-select', SynSelectEvent]]
+>;
+/**
+ * @summary Menu items provide options for the user to pick from in a menu.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-item--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-popup
+ * @dependency syn-spinner
+ *
+ * @slot - The menu item's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ * @slot submenu - Used to denote a nested menu.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
+ * @csspart prefix - The prefix container.
+ * @csspart label - The menu item label.
+ * @csspart suffix - The suffix container.
+ * @csspart spinner - The spinner that shows when the menu item is in the loading state.
+ * @csspart spinner__base - The spinner's base part.
+ * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
+ *
+ * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
+ */ export type SynMenuItemJSXElement = SynCustomElement<SynMenuItem, []>;
+/**
+ * @summary Menu labels are used to describe a group of menu items.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The menu label's content.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart label - The label that is displayed below the divider
+ *
+ * @dependency syn-divider
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */ export type SynMenuLabelJSXElement = SynCustomElement<SynMenuLabel, []>;
+/**
+ * @summary Flexible button / link component that can be used to quickly build navigations.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs
+ * Takes one of 3 forms:
+ * - button (default),
+ * - link (overrides button if a 'href' is provided),
+ * - or accordion (overrides all other if 'children' slot is defined).
+ *
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ * @dependency syn-icon
+ *
+ * @event syn-show - Emitted when the navigation item:
+ * - has children,
+ * - and is clicked while HTML details are hidden.
+ *
+ * @event syn-hide - Emitted when the navigation item:
+ * - has children,
+ * - and is clicked while HTML details are shown.
+ *
+ * @event syn-blur - Emitted when the button loses focus.
+ * @event syn-focus - Emitted when the button gains focus.
+ *
+ * @slot - The navigation item's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ * @slot children - Slot used to provide nested child navigation elements.
+ * If provided, details and summary elements will be used.
+ * A chevron will be shown on the right side regardless of the chevron property.
+ *
+ * @csspart base - The component's base wrapper including children.
+ * @csspart children - The wrapper that holds the children
+ * @csspart content-wrapper - The component's content wrapper.
+ * @csspart content - The component's content excluding children.
+ * @csspart current-indicator - The indicator used when current is set to true
+ * @csspart chevron - The container that wraps the chevron.
+ * @csspart details - The details element rendered when there are children available
+ * @csspart divider - The components optional top divider.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ *
+ * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.
+ * @cssproperty --indentation-stepping - The amount of pixels each level will indent.
+ * @cssproperty --display-children - Display property of the children. Defaults to "contents"
+ */ export type SynNavItemJSXElement = SynCustomElement<
+  SynNavItem,
+  [
+    ['syn-show', SynShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-blur', SynBlurEvent],
+    ['syn-focus', SynFocusEvent],
+  ]
+>;
+/**
+ * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs
+ * @status stable
+ * @since 1.3.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The given options. Must be `<syn-option>` elements.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot label - The label for the optgroup
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label-container - The container that wraps prefix, label and base
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart options - The container that wraps the <syn-option> elements.
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */ export type SynOptgroupJSXElement = SynCustomElement<SynOptgroup, []>;
+/**
+ * @summary Options define the selectable items within various form controls such as [select](/components/select).
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The option's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The option's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ */ export type SynOptionJSXElement = SynCustomElement<SynOption, []>;
+/**
+ * @summary <syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs
+ * @status stable
+ * @since 3.12.0
+ *
+ * @event syn-pagination-page-changed - Emitted when the current page changes
+ * @event syn-pagination-page-size-changed - Emitted when the page size changes
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart divider - The divider element displayed at the top of the pagination component.
+ * @csspart page-size-select-wrapper - The wrapper element containing the page size select and page item summary.
+ * @csspart page-size-select - The page size select element.
+ * @csspart page-item-summary - The text element displaying the current page item range and total items.
+ * @csspart page-input-section - The section containing the page number input and total pages display.
+ * @csspart page-input - The page number input element.
+ * @csspart navigation - The pagination navigation element.
+ * @csspart navigation-action - The individual navigation action buttons (first, previous, next, last).
+ *
+ * @accessibility
+ * The entire component is wrapped in a semantic `<nav>` landmark with an `aria-label` for screen reader accessibility.
+ * Use the `aria-label` attribute to provide a unique, descriptive label when multiple pagination controls exist on the page.
+ * Example: `<syn-pagination aria-label="Search results pagination"></syn-pagination>`
+ */ export type SynPaginationJSXElement = SynCustomElement<
+  SynPagination,
+  [
+    ['syn-pagination-page-changed', SynPaginationPageChangedEvent],
+    ['syn-pagination-page-size-changed', SynPaginationPageSizeChangedEvent],
+  ]
+>;
+/**
+ * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
+ *  operations in your listener or consider debouncing it.
+ *
+ * @slot - The popup's content.
+ * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
+ *  `anchor` attribute or property instead.
+ *
+ * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
+ *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
+ *  maybe a border or box shadow.
+ * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
+ * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
+ *
+ * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
+ *  attribute is used.
+ * @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.
+ * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ */ export type SynPopupJSXElement = SynCustomElement<
+  SynPopup,
+  [['syn-reposition', SynRepositionEvent]]
+>;
+/**
+ * @summary The `<syn-prio-nav />` element provides a generic navigation bar
+ * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)
+ * together. It will automatically group all items not visible in the viewport into a custom
+ * priority menu.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
+ * @example
+ * <syn-prio-nav>
+ *  <syn-nav-item current horizontal>Item 1</syn-nav-item>
+ *  <button role="menuitem">Item 2 (custom)</button>
+ *  <syn-nav-item horizontal>Item 3</syn-nav-item>
+ * </syn-prio-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-dropdown
+ * @dependency syn-icon
+ * @dependency syn-menu
+ * @dependency syn-nav-item
+ *
+ * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s
+ *    or have a role of "menuitem"
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart priority-menu - The wrapper around the priority menu
+ * @csspart priority-menu-nav-item - The navigation item for the priority menu
+ * @csspart priority-menu-label - The label for the priority menu
+ * @csspart priority-menu-icon - The icon for the priority menu
+ * @csspart priority-menu-container - The container for the shifted navigation items,
+ *    if there is not enough space.
+ *
+ */ export type SynPrioNavJSXElement = SynCustomElement<SynPrioNav, []>;
+/**
+ * @summary Progress bars are used to show the status of an ongoing operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the progress indicator.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart indicator - The progress bar's indicator.
+ * @csspart label - The progress bar's label.
+ *
+ * @cssproperty --height - The progress bar's height.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --label-color - The color of the label.
+ * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
+ */ export type SynProgressBarJSXElement = SynCustomElement<SynProgressBar, []>;
+/**
+ * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - A label to show inside the ring.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The progress ring label.
+ *
+ * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
+ */ export type SynProgressRingJSXElement = SynCustomElement<
+  SynProgressRing,
+  []
+>;
+/**
+ * @summary Radios allow the user to select a single option from a group.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The radio's label.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-focus - Emitted when the control gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The circular container that wraps the radio's checked state.
+ * @csspart control--checked - The radio control when the radio is checked.
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart label - The container that wraps the radio's label.
+ */ export type SynRadioJSXElement = SynCustomElement<
+  SynRadio,
+  [['syn-blur', SynBlurEvent], ['syn-focus', SynFocusEvent]]
+>;
+/**
+ * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The radio button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @event syn-blur - Emitted when the button loses focus.
+ * @event syn-focus - Emitted when the button gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart button - The internal `<button>` element.
+ * @csspart button--checked - The internal button element when the radio button is checked.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The container that wraps the radio button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ */ export type SynRadioButtonJSXElement = SynCustomElement<
+  SynRadioButton,
+  [['syn-blur', SynBlurEvent], ['syn-focus', SynFocusEvent]]
+>;
+/**
+ * @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.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-button-group
+ *
+ * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
+ * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
+ *  attribute.
+ * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-change - Emitted when the radio group's selected value changes.
+ * @event syn-input - Emitted when the radio group receives user input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart button-group - The button group that wraps radio buttons.
+ * @csspart button-group__base - The button group's `base` part.
+ */ export type SynRadioGroupJSXElement = SynCustomElement<
+  SynRadioGroup,
+  [
+    ['syn-change', SynChangeEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-invalid', SynInvalidEvent],
+  ]
+>;
+/**
+ * @summary Ranges allow the user to select values within a given range using one or two thumbs.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @status stable
+ *
+ * @dependency syn-tooltip
+ *
+ * @slot label - The range's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the range.
+ * @slot suffix - Used to append a presentational icon or similar element to the range.
+ * @slot help-text - Text that describes how to use the range.
+ * Alternatively, you can use the `help-text` attribute.
+ * @slot ticks - Used to display tick marks at specific intervals along the range.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity
+ * and its constraints aren't satisfied.
+ * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
+ * Use `Event.preventDefault()` to prevent movement.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the input track and ticks.
+ * @csspart track-wrapper - The wrapper for the track.
+ * @csspart track - The inactive track.
+ * @csspart active-track - The active track.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart ticks - The container that wraps the tick marks.
+ * @csspart thumb - The thumb(s) that the user can drag to change the range.
+ *
+ * @csspart tooltip__base - The base of the tooltip
+ * @csspart tooltip__arrow - The arrow of the tooltip
+ * @csspart tooltip__popup - The popup of the tooltip
+ * @csspart tooltip__body - The body of the tooltip
+ *
+ * @cssproperty --thumb-size - The size of a thumb.
+ * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
+ * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
+ * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
+ * @cssproperty --track-color-active - Color of the track representing the current value.
+ * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
+ * @cssproperty --track-height - The height of the track.
+ * @cssproperty --track-active-offset - The point of origin of the active track,
+ * starting at the left side of the range.
+ */ export type SynRangeJSXElement = SynCustomElement<
+  SynRange,
+  [
+    ['syn-blur', SynBlurEvent],
+    ['syn-change', SynChangeEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-invalid', SynInvalidEvent],
+    ['syn-move', SynMoveEvent],
+  ]
+>;
+/**
+ * @summary Ticks visually improve positioning on range sliders.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs
+ * @status stable
+ *
+ * @slot - The tick's label
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The component's label.
+ * @csspart line - The component's tick line.
+ *
+ * @cssproperty --tick-height - The height of the tick marker.
+ * @cssproperty --tick-label-top - The top offset of the tick label.
+ */ export type SynRangeTickJSXElement = SynCustomElement<SynRangeTick, []>;
+/**
+ * @summary Selects allow you to choose items from a menu of predefined options.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-popup
+ * @dependency syn-tag
+ *
+ * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-change - Emitted when the control's value changes.
+ * @event syn-clear - Emitted when the control's value is cleared.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-show - Emitted when the select's menu opens.
+ * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.
+ * @event syn-hide - Emitted when the select's menu closes.
+ * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The select's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
+ * @csspart listbox - The listbox container where options are slotted.
+ * @csspart tags - The container that houses option tags when `multiselect` is used.
+ * @csspart tag - The individual tags that represent each multiselect option.
+ * @csspart tag__base - The tag's base part.
+ * @csspart tag__content - The tag's content part.
+ * @csspart tag__remove-button - The tag's remove button.
+ * @csspart tag__remove-button__base - The tag's remove button base part.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The container that wraps the expand icon.
+ * @csspart popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ */ export type SynSelectJSXElement = SynCustomElement<
+  SynSelect,
+  [
+    ['syn-change', SynChangeEvent],
+    ['syn-clear', SynClearEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-blur', SynBlurEvent],
+    ['syn-show', SynShowEvent],
+    ['syn-after-show', SynAfterShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-after-hide', SynAfterHideEvent],
+    ['syn-invalid', SynInvalidEvent],
+  ]
+>;
+/**
+ * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
+ * It can be used to group multiple navigation items (<syn-nav-item />s) together.
+ *
+ * @example
+ * <syn-side-nav open>
+ *  <syn-nav-item >Item 1</syn-nav-item>
+ *  <syn-nav-item divider>Item 2</syn-nav-item>
+ * </syn-side-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ * @dependency syn-drawer
+ * @dependency syn-icon
+ * @dependency syn-nav-item
+ *
+ * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
+ * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
+ *    Please avoid having to many nav-items as it can massively influence the user experience.
+ * @slot toggle-label - The label of the toggle nav-item for variant="sticky".
+ * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
+ * for variant="sticky".
+ *
+ * @event syn-show - Emitted when the side-nav opens.
+ * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
+ * @event syn-hide - Emitted when the side-nav closes.
+ * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
+ *
+ * @csspart base - The components base wrapper
+ * @csspart drawer - The drawer that is used under the hood for creating the side-nav
+ * @csspart content-container - The components main content container
+ * @csspart content - The components main content
+ * @csspart footer-container - The components footer content container
+  (where the footer slot content is rendered)
+ * @csspart footer-divider - The components footer divider
+ * @csspart footer - The components footer content
+ * @csspart overlay - The overlay that covers the screen behind the side-nav.
+ * @csspart panel - The side-nav's panel (where the whole content is rendered).
+ * @csspart body - The side-nav's body (where the default slot content is rendered)
+ * @csspart drawer__base - The drawer's base wrapper
+ * @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
+ * @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
+ * @csspart toggle-label - The label of the toggle nav-item for variant="sticky".
+
+ * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
+ *
+ * @animation sideNav.showNonRail - The animation to use when showing the side-nav
+ *  in variant="default".
+ * @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
+ *  in variant="default".
+ * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
+ * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
+ */ export type SynSideNavJSXElement = SynCustomElement<
+  SynSideNav,
+  [
+    ['syn-show', SynShowEvent],
+    ['syn-after-show', SynAfterShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-after-hide', SynAfterHideEvent],
+  ]
+>;
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */ export type SynSpinnerJSXElement = SynCustomElement<SynSpinner, []>;
+/**
+ * @summary Switches allow the user to toggle an option on or off.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The switch's label.
+ * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when the control's checked state changes.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The control that houses the switch's thumb.
+ * @csspart thumb - The switch's thumb.
+ * @csspart label - The switch's label.
+ * @csspart form-control-help-text - The help text's wrapper.
+ *
+ * @cssproperty --width - The width of the switch.
+ * @cssproperty --height - The height of the switch.
+ * @cssproperty --thumb-size - The size of the thumb.
+ */ export type SynSwitchJSXElement = SynCustomElement<
+  SynSwitch,
+  [
+    ['syn-blur', SynBlurEvent],
+    ['syn-change', SynChangeEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-invalid', SynInvalidEvent],
+  ]
+>;
+/**
+ * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The tab's label.
+ *
+ * @event syn-close - Emitted when the tab is closable and the close button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ */ export type SynTabJSXElement = SynCustomElement<
+  SynTab,
+  [['syn-close', SynCloseEvent]]
+>;
+/**
+ * @summary Tab groups organize content into a container that shows one section at a time.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
+ * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
+ *
+ * @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.
+ * @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.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart nav - The tab group's navigation container where tabs are slotted in.
+ * @csspart tabs - The container that wraps the tabs.
+ * @csspart active-tab-indicator - The line that highlights the currently selected tab.
+ * @csspart body - The tab group's body where tab panels are slotted in.
+ * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
+ * @csspart scroll-button--start - The starting scroll button.
+ * @csspart scroll-button--end - The ending scroll button.
+ * @csspart scroll-button__base - The scroll button's exported `base` part.
+ *
+ * @cssproperty --indicator-color - The color of the active tab indicator.
+ * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
+ */ export type SynTabGroupJSXElement = SynCustomElement<
+  SynTabGroup,
+  [['syn-tab-show', SynTabShowEvent], ['syn-tab-hide', SynTabHideEvent]]
+>;
+/**
+ * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */ export type SynTabPanelJSXElement = SynCustomElement<SynTabPanel, []>;
+/**
+ * @summary Tags are used as labels to organize things or to indicate a selection.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The tag's content.
+ *
+ * @event syn-remove - Emitted when the remove button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart content - The tag's content.
+ * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.
+ * @csspart remove-button__base - The remove button's exported `base` part.
+ */ export type SynTagJSXElement = SynCustomElement<
+  SynTag,
+  [['syn-remove', SynRemoveEvent]]
+>;
+/**
+ * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
+ * It arranges tags in flexible rows and supports different sizes and layouts.
+ * Tags can be removable, icon‑based, or purely textual.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
+ * @status stable
+ *
+ * @slot - The tag group's main content. Must be `<syn-tag />` elements.
+ * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart tag-label - The tag group's label.
+ */ export type SynTagGroupJSXElement = SynCustomElement<SynTagGroup, []>;
+/**
+ * @summary Textareas collect data from the user and allow multiple lines of text.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart textarea - The internal `<textarea>` control.
+ */ export type SynTextareaJSXElement = SynCustomElement<
+  SynTextarea,
+  [
+    ['syn-blur', SynBlurEvent],
+    ['syn-change', SynChangeEvent],
+    ['syn-focus', SynFocusEvent],
+    ['syn-input', SynInputEvent],
+    ['syn-invalid', SynInvalidEvent],
+  ]
+>;
+/**
+ * @summary Tooltips display additional information based on a specific action.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-popup
+ *
+ * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+ * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+ *
+ * @event syn-show - Emitted when the tooltip begins to show.
+ * @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.
+ * @event syn-hide - Emitted when the tooltip begins to hide.
+ * @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+ * @csspart body - The tooltip's body where its content is rendered.
+ *
+ * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
+ * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
+ * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
+ *
+ * @animation tooltip.show - The animation to use when showing the tooltip.
+ * @animation tooltip.hide - The animation to use when hiding the tooltip.
+ */ export type SynTooltipJSXElement = SynCustomElement<
+  SynTooltip,
+  [
+    ['syn-show', SynShowEvent],
+    ['syn-after-show', SynAfterShowEvent],
+    ['syn-hide', SynHideEvent],
+    ['syn-after-hide', SynAfterHideEvent],
+  ]
+>;
+/**
+ * @summary Validate provides form field validation messages in a unified way.
+ * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+ * and showing the validation message in a consistent, user defined way.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
+ * @dependency syn-alert
+ * @dependency syn-tooltip
+ *
+ * @slot - The form field that should be validated.
+ * Avoid slotting in more than one element, as subsequent ones will be ignored.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the form field.
+ *
+ * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
+ * @csspart alert__base - The container that wraps the alert.
+ * @csspart alert__message - The container that wraps the alert message.
+ * @csspart alert__icon - The container that wraps the alert icon.
+ *
+ * @csspart tooltip - The syn-tooltip that is shown when the variant is set to "tooltip".
+ * @csspart tooltip__base - The container that wraps the tooltip.
+ * @csspart tooltip__popup - The container that wraps the tooltip popup.
+ * @csspart tooltip__arrow - The container that wraps the tooltip arrow.
+ * @csspart tooltip__body - The container that wraps the tooltip body.
+ */ export type SynValidateJSXElement = SynCustomElement<SynValidate, []>;
+
+declare module 'react' {
+  // #746: Allow synergies custom properties as css variable names
+  // @see https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
+  // @see https://stackoverflow.com/questions/65878880/typescript-template-literal-as-interface-key/65879197#65879197
+  interface CSSProperties {
+    [key: `--${string}`]: string | undefined;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @summary Accordions provide the ability to group a list of `<syn-details>`.
+       *
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
+       * @status stable
+       * @since 1.23.0
+       *
+       * @slot - The accordion's main content. Must be `<syn-details />` elements.
+       *
+       * @csspart base - The component's base wrapper.
+       */ 'syn-accordion': SynAccordionJSXElement;
+      /**
+       * @summary Alerts are used to display important messages inline or as toast notifications.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon-button
+       *
+       * @slot - The alert's main content.
+       * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
+       *
+       * @event syn-show - Emitted when the alert opens.
+       * @event syn-after-show - Emitted after the alert opens and all animations are complete.
+       * @event syn-hide - Emitted when the alert closes.
+       * @event syn-after-hide - Emitted after the alert closes and all animations are complete.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart icon - The container that wraps the optional icon.
+       * @csspart message - The container that wraps the alert's main content.
+       * @csspart close-button - The close button, an `<syn-icon-button>`.
+       * @csspart close-button__base - The close button's exported `base` part.
+       *
+       * @animation alert.show - The animation to use when showing the alert.
+       * @animation alert.hide - The animation to use when hiding the alert.
+       */ 'syn-alert': SynAlertJSXElement;
+      /**
+       * @summary Badges are used to draw attention and display statuses or counts.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - The badge's content.
+       *
+       * @csspart base - The component's base wrapper.
+       */ 'syn-badge': SynBadgeJSXElement;
+      /**
+       * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - One or more breadcrumb items to display.
+       * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
+       *
+       * @dependency syn-icon
+       *
+       * @csspart base - The component's base wrapper.
+       */ 'syn-breadcrumb': SynBreadcrumbJSXElement;
+      /**
+       * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - The breadcrumb item's label.
+       * @slot prefix - An optional prefix, usually an icon or icon button.
+       * @slot suffix - An optional suffix, usually an icon or icon button.
+       * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
+       * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart label - The breadcrumb item's label.
+       * @csspart prefix - The container that wraps the prefix.
+       * @csspart suffix - The container that wraps the suffix.
+       * @csspart separator - The container that wraps the separator.
+       */ 'syn-breadcrumb-item': SynBreadcrumbItemJSXElement;
+      /**
+       * @summary Buttons represent actions that are available to the user.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon
+       * @dependency syn-spinner
+       *
+       * @event syn-blur - Emitted when the button loses focus.
+       * @event syn-focus - Emitted when the button gains focus.
+       * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+       *
+       * @slot - The button's label.
+       * @slot prefix - A presentational prefix icon or similar element.
+       * @slot suffix - A presentational suffix icon or similar element.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart prefix - The container that wraps the prefix.
+       * @csspart label - The button's label.
+       * @csspart suffix - The container that wraps the suffix.
+       * @csspart caret - The button's caret icon, an `<syn-icon>` element.
+       * @csspart spinner - The spinner that shows when the button is in the loading state.
+       */ 'syn-button': SynButtonJSXElement;
+      /**
+       * @summary Button groups can be used to group related buttons into sections.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - One or more `<syn-button>` elements to display in the button group.
+       *
+       * @csspart base - The component's base wrapper.
+       */ 'syn-button-group': SynButtonGroupJSXElement;
+      /**
+       * @summary Cards can be used to group related subjects in a container.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - The card's main content.
+       * @slot header - An optional header for the card.
+       * @slot footer - An optional footer for the card.
+       * @slot image - An optional image to render at the start of the card.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart image - The container that wraps the card's image.
+       * @csspart header - The container that wraps the card's header.
+       * @csspart body - The container that wraps the card's main content.
+       * @csspart footer - The container that wraps the card's footer.
+       *
+       * @cssproperty --border-color - The card's border color, including borders that occur inside the card.
+       * @cssproperty --border-radius - The border radius for the card's edges.
+       * @cssproperty --border-width - The width of the card's borders.
+       * @cssproperty --padding - The padding to use for the card's sections.
+       */ 'syn-card': SynCardJSXElement;
+      /**
+       * @summary Checkboxes allow the user to toggle an option on or off.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon
+       *
+       * @slot - The checkbox's label.
+       * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
+       *
+       * @event syn-blur - Emitted when the checkbox loses focus.
+       * @event syn-change - Emitted when the checked state changes.
+       * @event syn-focus - Emitted when the checkbox gains focus.
+       * @event syn-input - Emitted when the checkbox receives input.
+       * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart control - The square container that wraps the checkbox's checked state.
+       * @csspart control--checked - Matches the control part when the checkbox is checked.
+       * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
+       * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+       * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.
+       * @csspart label - The container that wraps the checkbox's label.
+       * @csspart form-control-help-text - The help text's wrapper.
+       */ 'syn-checkbox': SynCheckboxJSXElement;
+      /**
+       * @summary A combobox component that combines the functionality of a text input with a dropdown listbox,
+       * allowing users to either select from predefined options or enter custom values (when not restricted).
+       *
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
+       * @status stable
+       *
+       * @dependency syn-icon
+       * @dependency syn-popup
+       * @dependency syn-tag
+       *
+       * @slot - The listbox options. Must be `<syn-option>` elements.
+       *    You can use `<syn-optgroup>`'s to group items visually.
+       * @slot label - The combobox's label. Alternatively, you can use the `label` attribute.
+       * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+       * @slot suffix - Used to append a presentational icon or similar element to the combobox.
+       * @slot clear-icon - An icon to use in lieu of the default clear icon.
+       * @slot expand-icon - The icon to show when the control is expanded and collapsed.
+       *    Rotates on open and close.
+       * @slot help-text - Text that describes how to use the combobox.
+       *    Alternatively, you can use the `help-text` attribute.
+       *
+       * @event syn-change - Emitted when the control's value changes.
+       * @event syn-clear - Emitted when the control's value is cleared.
+       * @event syn-input - Emitted when the control receives input.
+       * @event syn-focus - Emitted when the control gains focus.
+       * @event syn-blur - Emitted when the control loses focus.
+       * @event syn-show - Emitted when the combobox's menu opens.
+       * @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.
+       * @event syn-hide - Emitted when the combobox's menu closes.
+       * @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.
+       * @event syn-invalid - Emitted when the form control has been checked for validity
+       *    and its constraints aren't satisfied.
+       * @event syn-error - Emitted when the combobox menu fails to open.
+       *
+       * @csspart form-control - The form control that wraps the label, combobox, and help text.
+       * @csspart form-control-label - The label's wrapper.
+       * @csspart form-control-input - The combobox's wrapper.
+       * @csspart form-control-help-text - The help text's wrapper.
+       * @csspart combobox - The container that wraps the prefix, combobox, clear icon, and expand button.
+       * @csspart prefix - The container that wraps the prefix slot.
+       * @csspart suffix - The container that wraps the suffix slot.
+       * @csspart display-input - The element that displays the selected option's label,
+       *     an `<input>` element.
+       * @csspart listbox - The listbox container where the options are slotted
+       *   and the filtered options list exists.
+       * @csspart filtered-listbox - The container that wraps the filtered options.
+       * @csspart clear-button - The clear button.
+       * @csspart expand-icon - The container that wraps the expand icon.
+       * @csspart popup - The popup's exported `popup` part.
+       * Use this to target the tooltip's popup container.
+       * @csspart no-results - The container that wraps the "no results" message.
+       * @csspart tags - The container that houses option tags when `multiple` is used.
+       * @csspart tag - The individual tags that represent each selected option in `multiple`.
+       * @csspart tag__base - The tag's base part.
+       * @csspart tag__content - The tag's content part.
+       * @csspart tag__remove-button - The tag's remove button.
+       * @csspart tag__remove-button__base - The tag's remove button base part.
+       *
+       * @animation combobox.show - The animation to use when showing the combobox.
+       * @animation combobox.hide - The animation to use when hiding the combobox.
+       */ 'syn-combobox': SynComboboxJSXElement;
+      /**
+       * @summary Details show a brief summary and expand to show additional content.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon
+       *
+       * @slot - The details' main content.
+       * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+       * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.
+       * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.
+       *
+       * @event syn-show - Emitted when the details opens.
+       * @event syn-after-show - Emitted after the details opens and all animations are complete.
+       * @event syn-hide - Emitted when the details closes.
+       * @event syn-after-hide - Emitted after the details closes and all animations are complete.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart header - The header that wraps both the summary and the expand/collapse icon.
+       * @csspart summary - The container that wraps the summary.
+       * @csspart summary-icon - The container that wraps the expand/collapse icons.
+       * @csspart content - The details content.
+       * @csspart body - The container that wraps the details content.
+       *
+       * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
+       * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+       *
+       * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
+       */ 'syn-details': SynDetailsJSXElement;
+      /**
+       * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dialog--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon-button
+       *
+       * @slot - The dialog's main content.
+       * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
+       * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+       * @slot footer - The dialog's footer, usually one or more buttons representing various options.
+       *
+       * @event syn-show - Emitted when the dialog opens.
+       * @event syn-after-show - Emitted after the dialog opens and all animations are complete.
+       * @event syn-hide - Emitted when the dialog closes.
+       * @event syn-after-hide - Emitted after the dialog closes and all animations are complete.
+       * @event syn-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
+       *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+       * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
+       *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
+       *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
+       *   destructive behavior such as data loss.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart overlay - The overlay that covers the screen behind the dialog.
+       * @csspart panel - The dialog's panel (where the dialog and its content are rendered).
+       * @csspart header - The dialog's header. This element wraps the title and header actions.
+       * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+       * @csspart title - The dialog's title.
+       * @csspart close-button - The close button, an `<syn-icon-button>`.
+       * @csspart close-button__base - The close button's exported `base` part.
+       * @csspart body - The dialog's body.
+       * @csspart footer - The dialog's footer.
+       *
+       * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
+       * @cssproperty --header-spacing - The amount of padding to use for the header.
+       * @cssproperty --body-spacing - The amount of padding to use for the body.
+       * @cssproperty --footer-spacing - The amount of padding to use for the footer.
+       *
+       * @animation dialog.show - The animation to use when showing the dialog.
+       * @animation dialog.hide - The animation to use when hiding the dialog.
+       * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
+       * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
+       * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
+       *
+       * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
+       *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
+       *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
+       */ 'syn-dialog': SynDialogJSXElement;
+      /**
+       * @summary Dividers are used to visually separate or group elements.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @cssproperty --color - The color of the divider.
+       * @cssproperty --width - The width of the divider.
+       * @cssproperty --spacing - The spacing of the divider.
+       */ 'syn-divider': SynDividerJSXElement;
+      /**
+       * @summary Drawers slide in from a container to expose additional options and information.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-drawer--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon-button
+       *
+       * @slot - The drawer's main content.
+       * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
+       * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+       * @slot footer - The drawer's footer, usually one or more buttons representing various options.
+       *
+       * @event syn-show - Emitted when the drawer opens.
+       * @event syn-after-show - Emitted after the drawer opens and all animations are complete.
+       * @event syn-hide - Emitted when the drawer closes.
+       * @event syn-after-hide - Emitted after the drawer closes and all animations are complete.
+       * @event syn-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling
+       *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+       * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
+       *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
+       *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
+       *   destructive behavior such as data loss.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart overlay - The overlay that covers the screen behind the drawer.
+       * @csspart panel - The drawer's panel (where the drawer and its content are rendered).
+       * @csspart header - The drawer's header. This element wraps the title and header actions.
+       * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+       * @csspart title - The drawer's title.
+       * @csspart close-button - The close button, an `<syn-icon-button>`.
+       * @csspart close-button__base - The close button's exported `base` part.
+       * @csspart body - The drawer's body.
+       * @csspart footer - The drawer's footer.
+       *
+       * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
+       *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
+       * @cssproperty --header-spacing - The amount of padding to use for the header.
+       * @cssproperty --body-spacing - The amount of padding to use for the body.
+       * @cssproperty --footer-spacing - The amount of padding to use for the footer.
+       *
+       * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.
+       * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.
+       * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.
+       * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.
+       * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.
+       * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.
+       * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.
+       * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.
+       * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.
+       * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.
+       * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.
+       *
+       * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
+       *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
+       *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
+       */ 'syn-drawer': SynDrawerJSXElement;
+      /**
+       * @summary Dropdowns expose additional content that "drops down" in a panel.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-popup
+       *
+       * @slot - The dropdown's main content.
+       * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
+       *
+       * @event syn-show - Emitted when the dropdown opens.
+       * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
+       * @event syn-hide - Emitted when the dropdown closes.
+       * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
+       *
+       * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+       * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+       * @csspart trigger - The container that wraps the trigger.
+       * @csspart panel - The panel that gets shown when the dropdown is open.
+       *
+       * @animation dropdown.show - The animation to use when showing the dropdown.
+       * @animation dropdown.hide - The animation to use when hiding the dropdown.
+       */ 'syn-dropdown': SynDropdownJSXElement;
+      /**
+       * @summary File controls allow selecting an arbitrary number of files for uploading.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-file--docs
+       * @status stable
+       *
+       * @dependency syn-button
+       * @dependency syn-icon
+       *
+       * @slot label - The file control's label. Alternatively, you can use the `label` attribute.
+       * @slot help-text - Text that describes how to use the file control.
+       *    Alternatively, you can use the `help-text` attribute.
+       * @slot droparea-icon - Optional droparea icon to use instead of the default.
+       *    Works best with `<syn-icon>`.
+       * @slot trigger - Optional content to be used as trigger instead of the default content.
+       *    Opening the file dialog on click and as well as drag and drop will work for this content.
+       *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,
+       *    *hide-value*. Also if using the disabled attribute, the disabled styling will not be
+       *    applied and must be taken care of yourself.
+       *
+       * @event syn-blur - Emitted when the control loses focus.
+       * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+       * @event syn-error - Emitted when multiple files are selected via drag and drop, without
+       * the `multiple` property being set.
+       * @event syn-focus - Emitted when the control gains focus.
+       * @event syn-input - Emitted when the control receives input.
+       *
+       * @csspart form-control - The form control that wraps the label, input, and help text.
+       * @csspart form-control-label - The label's wrapper.
+       * @csspart form-control-input - The input's wrapper.
+       * @csspart form-control-help-text - The help text's wrapper.
+       * @csspart button-wrapper - The wrapper around the button and text value.
+       * @csspart button - The syn-button acting as a file input.
+       * @csspart button__base - The syn-button's exported `base` part.
+       * @csspart value - The chosen files or placeholder text for the file input.
+       * @csspart droparea - The element wrapping the drop zone.
+       * @csspart droparea-background - The background of the drop zone.
+       * @csspart droparea-icon - The container that wraps the icon for the drop zone.
+       * @csspart droparea-value - The text for the drop zone.
+       * @csspart trigger - The container that wraps the trigger.
+       *
+       * @animation file.iconDrop - The animation to use for the file icon
+       * when a file is dropped
+       * @animation file.text.disappear - The disappear animation to use for the file placeholder text
+       * when a file is dropped
+       * @animation file.text.appear - The appear animation to use for the file placeholder text
+       * when a file is dropped
+       */ 'syn-file': SynFileJSXElement;
+      /**
+       * @summary The <syn-header /> element provides a generic application header
+       * that can be used to add applications name, toolbar and primary navigation.
+       *
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs
+       * @status stable
+       * @since 1.10.0
+       *
+       * @slot label - The label for the header
+       * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided
+       * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons
+       *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`
+       * @slot navigation - This slot can be used to add an optional horizontal navigation
+       * @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.
+       *                      The default close icon is a 'x'.
+       * @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.
+       *                      The default open icon is a burger menu.
+       *
+       * @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed
+       * @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden
+       * @event syn-burger-menu-open - Emitted when the burger menu is toggled to open
+       *
+       * @csspart base - The component's base wrapper
+       * @csspart content - The wrapper most content items reside
+       * @csspart logo - The wrapper the application logo resides in
+       * @csspart label - The element wrapping the application name
+       * @csspart meta-navigation - The Item wrapping the optional application menu
+       * @csspart navigation - The wrapper that is holding the optional top navigation section
+       * @csspart burger-menu-toggle-button - The button that toggles the burger menu
+       *
+       * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
+       * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
+       */ 'syn-header': SynHeaderJSXElement;
+      /**
+       * @summary Icons are symbols that can be used to represent various options within an application.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
+       * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
+       *
+       * @csspart svg - The internal SVG element.
+       * @csspart use - The <use> element generated when using `spriteSheet: true`
+       */ 'syn-icon': SynIconJSXElement;
+      /**
+       * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon
+       *
+       * @event syn-blur - Emitted when the icon button loses focus.
+       * @event syn-focus - Emitted when the icon button gains focus.
+       *
+       * @csspart base - The component's base wrapper.
+       */ 'syn-icon-button': SynIconButtonJSXElement;
+      /**
+       * @summary Inputs collect data from the user.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon
+       * @dependency syn-divider
+       *
+       * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+       * @slot prefix - Used to prepend a presentational icon or similar element to the input.
+       * @slot suffix - Used to append a presentational icon or similar element to the input.
+       * @slot clear-icon - An icon to use in lieu of the default clear icon.
+       * @slot show-password-icon - An icon to use in lieu of the default show password icon.
+       * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
+       * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+       * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.
+       * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.
+       *
+       * @event syn-blur - Emitted when the control loses focus.
+       * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+       * @event syn-clear - Emitted when the clear button is activated.
+       * @event syn-focus - Emitted when the control gains focus.
+       * @event syn-input - Emitted when the control receives input.
+       * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+       * @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
+       *
+       * @csspart form-control - The form control that wraps the label, input, and help text.
+       * @csspart form-control-label - The label's wrapper.
+       * @csspart form-control-input - The input's wrapper.
+       * @csspart form-control-help-text - The help text's wrapper.
+       * @csspart base - The component's base wrapper.
+       * @csspart input - The internal `<input>` control.
+       * @csspart prefix - The container that wraps the prefix.
+       * @csspart clear-button - The clear button.
+       * @csspart password-toggle-button - The password toggle button.
+       * @csspart suffix - The container that wraps the suffix.
+       * @csspart stepper - The container that wraps the number stepper.
+       * @csspart decrement-number-stepper - The decrement number stepper button.
+       * @csspart increment-number-stepper - The increment number stepper button.
+       * @csspart divider - The divider between the increment and decrement number stepper buttons.
+       *
+       * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.
+       * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.
+       * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.
+       * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.
+       */ 'syn-input': SynInputJSXElement;
+      /**
+       * @summary Menus provide a list of options for the user to choose from.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - The menu's content, including menu items, menu labels, and dividers.
+       *
+       * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.
+       */ 'syn-menu': SynMenuJSXElement;
+      /**
+       * @summary Menu items provide options for the user to pick from in a menu.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-item--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon
+       * @dependency syn-popup
+       * @dependency syn-spinner
+       *
+       * @slot - The menu item's label.
+       * @slot prefix - Used to prepend an icon or similar element to the menu item.
+       * @slot suffix - Used to append an icon or similar element to the menu item.
+       * @slot submenu - Used to denote a nested menu.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
+       * @csspart prefix - The prefix container.
+       * @csspart label - The menu item label.
+       * @csspart suffix - The suffix container.
+       * @csspart spinner - The spinner that shows when the menu item is in the loading state.
+       * @csspart spinner__base - The spinner's base part.
+       * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
+       *
+       * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
+       */ 'syn-menu-item': SynMenuItemJSXElement;
+      /**
+       * @summary Menu labels are used to describe a group of menu items.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - The menu label's content.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart divider - The divider that is displayed above the content
+       * @csspart label - The label that is displayed below the divider
+       *
+       * @dependency syn-divider
+       *
+       * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+       */ 'syn-menu-label': SynMenuLabelJSXElement;
+      /**
+       * @summary Flexible button / link component that can be used to quickly build navigations.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs
+       * Takes one of 3 forms:
+       * - button (default),
+       * - link (overrides button if a 'href' is provided),
+       * - or accordion (overrides all other if 'children' slot is defined).
+       *
+       * @status stable
+       * @since 1.14.0
+       *
+       * @dependency syn-divider
+       * @dependency syn-icon
+       *
+       * @event syn-show - Emitted when the navigation item:
+       * - has children,
+       * - and is clicked while HTML details are hidden.
+       *
+       * @event syn-hide - Emitted when the navigation item:
+       * - has children,
+       * - and is clicked while HTML details are shown.
+       *
+       * @event syn-blur - Emitted when the button loses focus.
+       * @event syn-focus - Emitted when the button gains focus.
+       *
+       * @slot - The navigation item's label.
+       * @slot prefix - A presentational prefix icon or similar element.
+       * @slot suffix - A presentational suffix icon or similar element.
+       * @slot children - Slot used to provide nested child navigation elements.
+       * If provided, details and summary elements will be used.
+       * A chevron will be shown on the right side regardless of the chevron property.
+       *
+       * @csspart base - The component's base wrapper including children.
+       * @csspart children - The wrapper that holds the children
+       * @csspart content-wrapper - The component's content wrapper.
+       * @csspart content - The component's content excluding children.
+       * @csspart current-indicator - The indicator used when current is set to true
+       * @csspart chevron - The container that wraps the chevron.
+       * @csspart details - The details element rendered when there are children available
+       * @csspart divider - The components optional top divider.
+       * @csspart prefix - The container that wraps the prefix.
+       * @csspart suffix - The container that wraps the suffix.
+       *
+       * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.
+       * @cssproperty --indentation-stepping - The amount of pixels each level will indent.
+       * @cssproperty --display-children - Display property of the children. Defaults to "contents"
+       */ 'syn-nav-item': SynNavItemJSXElement;
+      /**
+       * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs
+       * @status stable
+       * @since 1.3.0
+       *
+       * @dependency syn-divider
+       *
+       * @slot - The given options. Must be `<syn-option>` elements.
+       * @slot prefix - A presentational prefix icon or similar element.
+       * @slot label - The label for the optgroup
+       * @slot suffix - A presentational suffix icon or similar element.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart label-container - The container that wraps prefix, label and base
+       * @csspart divider - The divider that is displayed above the content
+       * @csspart prefix - The container that wraps the prefix.
+       * @csspart suffix - The container that wraps the suffix.
+       * @csspart options - The container that wraps the <syn-option> elements.
+       *
+       * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+       */ 'syn-optgroup': SynOptgroupJSXElement;
+      /**
+       * @summary Options define the selectable items within various form controls such as [select](/components/select).
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon
+       *
+       * @slot - The option's label.
+       * @slot prefix - Used to prepend an icon or similar element to the menu item.
+       * @slot suffix - Used to append an icon or similar element to the menu item.
+       *
+       * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+       * @csspart base - The component's base wrapper.
+       * @csspart label - The option's label.
+       * @csspart prefix - The container that wraps the prefix.
+       * @csspart suffix - The container that wraps the suffix.
+       */ 'syn-option': SynOptionJSXElement;
+      /**
+       * @summary <syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.
+       *
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs
+       * @status stable
+       * @since 3.12.0
+       *
+       * @event syn-pagination-page-changed - Emitted when the current page changes
+       * @event syn-pagination-page-size-changed - Emitted when the page size changes
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart divider - The divider element displayed at the top of the pagination component.
+       * @csspart page-size-select-wrapper - The wrapper element containing the page size select and page item summary.
+       * @csspart page-size-select - The page size select element.
+       * @csspart page-item-summary - The text element displaying the current page item range and total items.
+       * @csspart page-input-section - The section containing the page number input and total pages display.
+       * @csspart page-input - The page number input element.
+       * @csspart navigation - The pagination navigation element.
+       * @csspart navigation-action - The individual navigation action buttons (first, previous, next, last).
+       *
+       * @accessibility
+       * The entire component is wrapped in a semantic `<nav>` landmark with an `aria-label` for screen reader accessibility.
+       * Use the `aria-label` attribute to provide a unique, descriptive label when multiple pagination controls exist on the page.
+       * Example: `<syn-pagination aria-label="Search results pagination"></syn-pagination>`
+       */ 'syn-pagination': SynPaginationJSXElement;
+      /**
+       * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
+       *  operations in your listener or consider debouncing it.
+       *
+       * @slot - The popup's content.
+       * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
+       *  `anchor` attribute or property instead.
+       *
+       * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
+       *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
+       *  maybe a border or box shadow.
+       * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
+       * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
+       *
+       * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
+       *  attribute is used.
+       * @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.
+       * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
+       *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+       *  available when using `auto-size`.
+       * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
+       *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+       *  available when using `auto-size`.
+       */ 'syn-popup': SynPopupJSXElement;
+      /**
+       * @summary The `<syn-prio-nav />` element provides a generic navigation bar
+       * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)
+       * together. It will automatically group all items not visible in the viewport into a custom
+       * priority menu.
+       *
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
+       * @example
+       * <syn-prio-nav>
+       *  <syn-nav-item current horizontal>Item 1</syn-nav-item>
+       *  <button role="menuitem">Item 2 (custom)</button>
+       *  <syn-nav-item horizontal>Item 3</syn-nav-item>
+       * </syn-prio-nav>
+       *
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
+       * @status stable
+       * @since 1.14.0
+       *
+       * @dependency syn-dropdown
+       * @dependency syn-icon
+       * @dependency syn-menu
+       * @dependency syn-nav-item
+       *
+       * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s
+       *    or have a role of "menuitem"
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart priority-menu - The wrapper around the priority menu
+       * @csspart priority-menu-nav-item - The navigation item for the priority menu
+       * @csspart priority-menu-label - The label for the priority menu
+       * @csspart priority-menu-icon - The icon for the priority menu
+       * @csspart priority-menu-container - The container for the shifted navigation items,
+       *    if there is not enough space.
+       *
+       */ 'syn-prio-nav': SynPrioNavJSXElement;
+      /**
+       * @summary Progress bars are used to show the status of an ongoing operation.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - A label to show inside the progress indicator.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart indicator - The progress bar's indicator.
+       * @csspart label - The progress bar's label.
+       *
+       * @cssproperty --height - The progress bar's height.
+       * @cssproperty --track-color - The color of the track.
+       * @cssproperty --indicator-color - The color of the indicator.
+       * @cssproperty --label-color - The color of the label.
+       * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
+       */ 'syn-progress-bar': SynProgressBarJSXElement;
+      /**
+       * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - A label to show inside the ring.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart label - The progress ring label.
+       *
+       * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
+       * @cssproperty --track-width - The width of the track.
+       * @cssproperty --track-color - The color of the track.
+       * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
+       * @cssproperty --indicator-color - The color of the indicator.
+       * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
+       */ 'syn-progress-ring': SynProgressRingJSXElement;
+      /**
+       * @summary Radios allow the user to select a single option from a group.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon
+       *
+       * @slot - The radio's label.
+       *
+       * @event syn-blur - Emitted when the control loses focus.
+       * @event syn-focus - Emitted when the control gains focus.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart control - The circular container that wraps the radio's checked state.
+       * @csspart control--checked - The radio control when the radio is checked.
+       * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+       * @csspart label - The container that wraps the radio's label.
+       */ 'syn-radio': SynRadioJSXElement;
+      /**
+       * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - The radio button's label.
+       * @slot prefix - A presentational prefix icon or similar element.
+       * @slot suffix - A presentational suffix icon or similar element.
+       *
+       * @event syn-blur - Emitted when the button loses focus.
+       * @event syn-focus - Emitted when the button gains focus.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart button - The internal `<button>` element.
+       * @csspart button--checked - The internal button element when the radio button is checked.
+       * @csspart prefix - The container that wraps the prefix.
+       * @csspart label - The container that wraps the radio button's label.
+       * @csspart suffix - The container that wraps the suffix.
+       */ 'syn-radio-button': SynRadioButtonJSXElement;
+      /**
+       * @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.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-button-group
+       *
+       * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
+       * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
+       *  attribute.
+       * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
+       *
+       * @event syn-change - Emitted when the radio group's selected value changes.
+       * @event syn-input - Emitted when the radio group receives user input.
+       * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+       *
+       * @csspart form-control - The form control that wraps the label, input, and help text.
+       * @csspart form-control-label - The label's wrapper.
+       * @csspart form-control-input - The input's wrapper.
+       * @csspart form-control-help-text - The help text's wrapper.
+       * @csspart button-group - The button group that wraps radio buttons.
+       * @csspart button-group__base - The button group's `base` part.
+       */ 'syn-radio-group': SynRadioGroupJSXElement;
+      /**
+       * @summary Ranges allow the user to select values within a given range using one or two thumbs.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+       * @status stable
+       *
+       * @dependency syn-tooltip
+       *
+       * @slot label - The range's label. Alternatively, you can use the `label` attribute.
+       * @slot prefix - Used to prepend a presentational icon or similar element to the range.
+       * @slot suffix - Used to append a presentational icon or similar element to the range.
+       * @slot help-text - Text that describes how to use the range.
+       * Alternatively, you can use the `help-text` attribute.
+       * @slot ticks - Used to display tick marks at specific intervals along the range.
+       *
+       * @event syn-blur - Emitted when the control loses focus.
+       * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+       * @event syn-focus - Emitted when the control gains focus.
+       * @event syn-input - Emitted when the control receives input.
+       * @event syn-invalid - Emitted when the form control has been checked for validity
+       * and its constraints aren't satisfied.
+       * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
+       * Use `Event.preventDefault()` to prevent movement.
+       *
+       * @csspart form-control - The form control that wraps the label, input, and help text.
+       * @csspart form-control-label - The label's wrapper.
+       * @csspart form-control-help-text - The help text's wrapper.
+       * @csspart base - The component's base wrapper.
+       * @csspart input-wrapper - The container that wraps the input track and ticks.
+       * @csspart track-wrapper - The wrapper for the track.
+       * @csspart track - The inactive track.
+       * @csspart active-track - The active track.
+       * @csspart prefix - The container that wraps the prefix.
+       * @csspart suffix - The container that wraps the suffix.
+       * @csspart ticks - The container that wraps the tick marks.
+       * @csspart thumb - The thumb(s) that the user can drag to change the range.
+       *
+       * @csspart tooltip__base - The base of the tooltip
+       * @csspart tooltip__arrow - The arrow of the tooltip
+       * @csspart tooltip__popup - The popup of the tooltip
+       * @csspart tooltip__body - The body of the tooltip
+       *
+       * @cssproperty --thumb-size - The size of a thumb.
+       * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
+       * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
+       * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
+       * @cssproperty --track-color-active - Color of the track representing the current value.
+       * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
+       * @cssproperty --track-height - The height of the track.
+       * @cssproperty --track-active-offset - The point of origin of the active track,
+       * starting at the left side of the range.
+       */ 'syn-range': SynRangeJSXElement;
+      /**
+       * @summary Ticks visually improve positioning on range sliders.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs
+       * @status stable
+       *
+       * @slot - The tick's label
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart label - The component's label.
+       * @csspart line - The component's tick line.
+       *
+       * @cssproperty --tick-height - The height of the tick marker.
+       * @cssproperty --tick-label-top - The top offset of the tick label.
+       */ 'syn-range-tick': SynRangeTickJSXElement;
+      /**
+       * @summary Selects allow you to choose items from a menu of predefined options.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon
+       * @dependency syn-popup
+       * @dependency syn-tag
+       *
+       * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.
+       * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+       * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+       * @slot suffix - Used to append a presentational icon or similar element to the combobox.
+       * @slot clear-icon - An icon to use in lieu of the default clear icon.
+       * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+       * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+       *
+       * @event syn-change - Emitted when the control's value changes.
+       * @event syn-clear - Emitted when the control's value is cleared.
+       * @event syn-input - Emitted when the control receives input.
+       * @event syn-focus - Emitted when the control gains focus.
+       * @event syn-blur - Emitted when the control loses focus.
+       * @event syn-show - Emitted when the select's menu opens.
+       * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.
+       * @event syn-hide - Emitted when the select's menu closes.
+       * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.
+       * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+       *
+       * @csspart form-control - The form control that wraps the label, input, and help text.
+       * @csspart form-control-label - The label's wrapper.
+       * @csspart form-control-input - The select's wrapper.
+       * @csspart form-control-help-text - The help text's wrapper.
+       * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
+       * @csspart prefix - The container that wraps the prefix slot.
+       * @csspart suffix - The container that wraps the suffix slot.
+       * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
+       * @csspart listbox - The listbox container where options are slotted.
+       * @csspart tags - The container that houses option tags when `multiselect` is used.
+       * @csspart tag - The individual tags that represent each multiselect option.
+       * @csspart tag__base - The tag's base part.
+       * @csspart tag__content - The tag's content part.
+       * @csspart tag__remove-button - The tag's remove button.
+       * @csspart tag__remove-button__base - The tag's remove button base part.
+       * @csspart clear-button - The clear button.
+       * @csspart expand-icon - The container that wraps the expand icon.
+       * @csspart popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+       */ 'syn-select': SynSelectJSXElement;
+      /**
+ * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
+ * It can be used to group multiple navigation items (<syn-nav-item />s) together.
+ *
+ * @example
+ * <syn-side-nav open>
+ *  <syn-nav-item >Item 1</syn-nav-item>
+ *  <syn-nav-item divider>Item 2</syn-nav-item>
+ * </syn-side-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ * @dependency syn-drawer
+ * @dependency syn-icon
+ * @dependency syn-nav-item
+ *
+ * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
+ * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
+ *    Please avoid having to many nav-items as it can massively influence the user experience.
+ * @slot toggle-label - The label of the toggle nav-item for variant="sticky".
+ * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
+ * for variant="sticky".
+ *
+ * @event syn-show - Emitted when the side-nav opens.
+ * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
+ * @event syn-hide - Emitted when the side-nav closes.
+ * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
+ *
+ * @csspart base - The components base wrapper
+ * @csspart drawer - The drawer that is used under the hood for creating the side-nav
+ * @csspart content-container - The components main content container
+ * @csspart content - The components main content
+ * @csspart footer-container - The components footer content container
+  (where the footer slot content is rendered)
+ * @csspart footer-divider - The components footer divider
+ * @csspart footer - The components footer content
+ * @csspart overlay - The overlay that covers the screen behind the side-nav.
+ * @csspart panel - The side-nav's panel (where the whole content is rendered).
+ * @csspart body - The side-nav's body (where the default slot content is rendered)
+ * @csspart drawer__base - The drawer's base wrapper
+ * @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
+ * @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
+ * @csspart toggle-label - The label of the toggle nav-item for variant="sticky".
+
+ * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
+ *
+ * @animation sideNav.showNonRail - The animation to use when showing the side-nav
+ *  in variant="default".
+ * @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
+ *  in variant="default".
+ * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
+ * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
+ */ 'syn-side-nav': SynSideNavJSXElement;
+      /**
+       * @summary Spinners are used to show the progress of an indeterminate operation.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @csspart base - The component's base wrapper.
+       *
+       * @cssproperty --track-width - The width of the track.
+       * @cssproperty --indicator-color - The color of the spinner's indicator.
+       * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+       */ 'syn-spinner': SynSpinnerJSXElement;
+      /**
+       * @summary Switches allow the user to toggle an option on or off.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - The switch's label.
+       * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
+       *
+       * @event syn-blur - Emitted when the control loses focus.
+       * @event syn-change - Emitted when the control's checked state changes.
+       * @event syn-input - Emitted when the control receives input.
+       * @event syn-focus - Emitted when the control gains focus.
+       * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart control - The control that houses the switch's thumb.
+       * @csspart thumb - The switch's thumb.
+       * @csspart label - The switch's label.
+       * @csspart form-control-help-text - The help text's wrapper.
+       *
+       * @cssproperty --width - The width of the switch.
+       * @cssproperty --height - The height of the switch.
+       * @cssproperty --thumb-size - The size of the thumb.
+       */ 'syn-switch': SynSwitchJSXElement;
+      /**
+       * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon-button
+       *
+       * @slot - The tab's label.
+       *
+       * @event syn-close - Emitted when the tab is closable and the close button is activated.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart close-button - The close button, an `<syn-icon-button>`.
+       * @csspart close-button__base - The close button's exported `base` part.
+       */ 'syn-tab': SynTabJSXElement;
+      /**
+       * @summary Tab groups organize content into a container that shows one section at a time.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon-button
+       *
+       * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
+       * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
+       *
+       * @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.
+       * @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.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart nav - The tab group's navigation container where tabs are slotted in.
+       * @csspart tabs - The container that wraps the tabs.
+       * @csspart active-tab-indicator - The line that highlights the currently selected tab.
+       * @csspart body - The tab group's body where tab panels are slotted in.
+       * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
+       * @csspart scroll-button--start - The starting scroll button.
+       * @csspart scroll-button--end - The ending scroll button.
+       * @csspart scroll-button__base - The scroll button's exported `base` part.
+       *
+       * @cssproperty --indicator-color - The color of the active tab indicator.
+       * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
+       * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+       * @cssproperty --indicator-width - The width of the active tab indicator.
+       */ 'syn-tab-group': SynTabGroupJSXElement;
+      /**
+       * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot - The tab panel's content.
+       *
+       * @csspart base - The component's base wrapper.
+       *
+       * @cssproperty --padding - The tab panel's padding.
+       */ 'syn-tab-panel': SynTabPanelJSXElement;
+      /**
+       * @summary Tags are used as labels to organize things or to indicate a selection.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-icon-button
+       *
+       * @slot - The tag's content.
+       *
+       * @event syn-remove - Emitted when the remove button is activated.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart content - The tag's content.
+       * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.
+       * @csspart remove-button__base - The remove button's exported `base` part.
+       */ 'syn-tag': SynTagJSXElement;
+      /**
+       * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
+       * It arranges tags in flexible rows and supports different sizes and layouts.
+       * Tags can be removable, icon‑based, or purely textual.
+       *
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
+       * @status stable
+       *
+       * @slot - The tag group's main content. Must be `<syn-tag />` elements.
+       * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart tag-label - The tag group's label.
+       */ 'syn-tag-group': SynTagGroupJSXElement;
+      /**
+       * @summary Textareas collect data from the user and allow multiple lines of text.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
+       * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+       *
+       * @event syn-blur - Emitted when the control loses focus.
+       * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+       * @event syn-focus - Emitted when the control gains focus.
+       * @event syn-input - Emitted when the control receives input.
+       * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+       *
+       * @csspart form-control - The form control that wraps the label, input, and help text.
+       * @csspart form-control-label - The label's wrapper.
+       * @csspart form-control-input - The input's wrapper.
+       * @csspart form-control-help-text - The help text's wrapper.
+       * @csspart base - The component's base wrapper.
+       * @csspart textarea - The internal `<textarea>` control.
+       */ 'syn-textarea': SynTextareaJSXElement;
+      /**
+       * @summary Tooltips display additional information based on a specific action.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
+       * @status stable
+       * @since 2.0
+       *
+       * @dependency syn-popup
+       *
+       * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+       * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+       *
+       * @event syn-show - Emitted when the tooltip begins to show.
+       * @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.
+       * @event syn-hide - Emitted when the tooltip begins to hide.
+       * @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.
+       *
+       * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+       * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+       * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+       * @csspart body - The tooltip's body where its content is rendered.
+       *
+       * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
+       * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
+       * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
+       *
+       * @animation tooltip.show - The animation to use when showing the tooltip.
+       * @animation tooltip.hide - The animation to use when hiding the tooltip.
+       */ 'syn-tooltip': SynTooltipJSXElement;
+      /**
+       * @summary Validate provides form field validation messages in a unified way.
+       * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+       * and showing the validation message in a consistent, user defined way.
+       * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
+       * @dependency syn-alert
+       * @dependency syn-tooltip
+       *
+       * @slot - The form field that should be validated.
+       * Avoid slotting in more than one element, as subsequent ones will be ignored.
+       *
+       * @csspart base - The component's base wrapper.
+       * @csspart input-wrapper - The container that wraps the form field.
+       *
+       * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
+       * @csspart alert__base - The container that wraps the alert.
+       * @csspart alert__message - The container that wraps the alert message.
+       * @csspart alert__icon - The container that wraps the alert icon.
+       *
+       * @csspart tooltip - The syn-tooltip that is shown when the variant is set to "tooltip".
+       * @csspart tooltip__base - The container that wraps the tooltip.
+       * @csspart tooltip__popup - The container that wraps the tooltip popup.
+       * @csspart tooltip__arrow - The container that wraps the tooltip arrow.
+       * @csspart tooltip__body - The container that wraps the tooltip body.
+       */ 'syn-validate': SynValidateJSXElement;
+    }
+  }
+}