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';
import type SynChart from '@synergy-design-system/components/components/chart/chart.component.js';
/**
 * 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 2.3.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 1.20.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 1.14.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 1.26.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 1.26.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 1.0.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 3.1.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 1.25.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 The `<syn-chart>` component is a container for displaying charts. It provides a structured layout and styling for chart elements, allowing for consistent presentation across different types of charts. The chart component is based on [Apache ECharts](https://echarts.apache.org)
 *
 * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
 * @status experimental
 * @since 3.15.0
 *
 * @csspart base - The component's base wrapper.
 */ export type SynChartJSXElement = SynCustomElement<SynChart, []>;
/**
 * @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 1.0.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
 * @since 2.8.0
 *
 * @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.3.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 1.23.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 1.4.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 1.8.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 1.12.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
 * @since 2.5.0
 *
 * @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 1.0.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 1.1.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 1.0.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 1.12.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 1.12.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 1.12.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.15.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.5.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 1.5.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 1.12.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.15.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 1.19.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 1.18.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 1.0.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 3.17.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 1.0.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
 * @since 2.6.0
 *
 * @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
 * @since 2.6.0
 *
 * @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 1.5.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.15.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 1.22.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 1.0.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.1.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.1.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.1.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 1.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
 * @since 3.7.0
 *
 * @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 1.0.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 1.21.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
 * @status stable
 * @since 2.12.0
 *
 * @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' {
    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 2.3.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 1.20.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 1.14.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 1.26.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 1.26.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 1.0.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 3.1.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 1.25.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 The `<syn-chart>` component is a container for displaying charts. It provides a structured layout and styling for chart elements, allowing for consistent presentation across different types of charts. The chart component is based on [Apache ECharts](https://echarts.apache.org)
             *
             * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
             * @status experimental
             * @since 3.15.0
             *
             * @csspart base - The component's base wrapper.
             */ 'syn-chart': SynChartJSXElement;
            /**
             * @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 1.0.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
             * @since 2.8.0
             *
             * @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.3.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 1.23.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 1.4.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 1.8.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 1.12.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
             * @since 2.5.0
             *
             * @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 1.0.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 1.1.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 1.0.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 1.12.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 1.12.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 1.12.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.15.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.5.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 1.5.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 1.12.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.15.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 1.19.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 1.18.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 1.0.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 3.17.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 1.0.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
             * @since 2.6.0
             *
             * @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
             * @since 2.6.0
             *
             * @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 1.5.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.15.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 1.22.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 1.0.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.1.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.1.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.1.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 1.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
             * @since 3.7.0
             *
             * @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 1.0.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 1.21.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
             * @status stable
             * @since 2.12.0
             *
             * @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;
        }
    }
}
export {};