@synergy-design-system/react 2.31.0-numeric.1 → 2.31.0-numeric.3

package/dist/types/syn-jsx-elements.d.ts

@@ -31,7 +31,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynAccordionJSXElement = SynCustomElement<SynAccordion, []>;
 /**
  * @summary Alerts are used to display important messages inline or as toast notifications.
- * @documentation https://synergy.style/components/alert
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
  * @status stable
  * @since 2.0
  *
@@ -73,7 +73,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Badges are used to draw attention and display statuses or counts.
- * @documentation https://synergy.style/components/badge
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
  * @status stable
  * @since 2.0
  *
@@ -83,7 +83,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynBadgeJSXElement = SynCustomElement<SynBadge, []>;
 /**
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
- * @documentation https://synergy.style/components/breadcrumb
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
  * @status stable
  * @since 2.0
  *
@@ -96,7 +96,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynBreadcrumbJSXElement = SynCustomElement<SynBreadcrumb, []>;
 /**
  * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
- * @documentation https://synergy.style/components/breadcrumb-item
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
  * @status stable
  * @since 2.0
  *
@@ -115,7 +115,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Buttons represent actions that are available to the user.
- * @documentation https://synergy.style/components/button
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
  * @status stable
  * @since 2.0
  *
@@ -152,7 +152,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Button groups can be used to group related buttons into sections.
- * @documentation https://synergy.style/components/button-group
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
  * @status stable
  * @since 2.0
  *
@@ -162,7 +162,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynButtonGroupJSXElement = SynCustomElement<SynButtonGroup, []>;
 /**
  * @summary Cards can be used to group related subjects in a container.
- * @documentation https://synergy.style/components/card
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
  * @status stable
  * @since 2.0
  *
@@ -184,7 +184,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynCardJSXElement = SynCustomElement<SynCard, []>;
 /**
  * @summary Checkboxes allow the user to toggle an option on or off.
- * @documentation https://synergy.style/components/checkbox
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs
  * @status stable
  * @since 2.0
  *
@@ -275,6 +275,8 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * @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.
  *
  * @animation combobox.show - The animation to use when showing the combobox.
  * @animation combobox.hide - The animation to use when hiding the combobox.
@@ -326,7 +328,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Details show a brief summary and expand to show additional content.
- * @documentation https://synergy.style/components/details
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs
  * @status stable
  * @since 2.0
  *
@@ -371,7 +373,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
- * @documentation https://synergy.style/components/dialog
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dialog--docs
  * @status stable
  * @since 2.0
  *
@@ -446,7 +448,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Dividers are used to visually separate or group elements.
- * @documentation https://synergy.style/components/divider
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs
  * @status stable
  * @since 2.0
  *
@@ -456,7 +458,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynDividerJSXElement = SynCustomElement<SynDivider, []>;
 /**
  * @summary Drawers slide in from a container to expose additional options and information.
- * @documentation https://synergy.style/components/drawer
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-drawer--docs
  * @status stable
  * @since 2.0
  *
@@ -538,7 +540,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Dropdowns expose additional content that "drops down" in a panel.
- * @documentation https://synergy.style/components/dropdown
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
  * @status stable
  * @since 2.0
  *
@@ -579,6 +581,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary File controls allow selecting an arbitrary number of files for uploading.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-file--docs
  * @status stable
  *
  * @dependency syn-button
@@ -689,7 +692,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Icons are symbols that can be used to represent various options within an application.
- * @documentation https://synergy.style/components/icon
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs
  * @status stable
  * @since 2.0
  *
@@ -704,7 +707,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
- * @documentation https://synergy.style/components/icon-button
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs
  * @status stable
  * @since 2.0
  *
@@ -720,7 +723,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Inputs collect data from the user.
- * @documentation https://synergy.style/components/input
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs
  * @status stable
  * @since 2.0
  *
@@ -796,7 +799,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Menus provide a list of options for the user to choose from.
- * @documentation https://synergy.style/components/menu
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs
  * @status stable
  * @since 2.0
  *
@@ -808,7 +811,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Menu items provide options for the user to pick from in a menu.
- * @documentation https://synergy.style/components/menu-item
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-item--docs
  * @status stable
  * @since 2.0
  *
@@ -834,7 +837,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynMenuItemJSXElement = SynCustomElement<SynMenuItem, []>;
 /**
  * @summary Menu labels are used to describe a group of menu items.
- * @documentation https://synergy.style/components/menu-label
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
  * @status stable
  * @since 2.0
  *
@@ -850,6 +853,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ 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),
@@ -934,7 +938,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynOptgroupJSXElement = SynCustomElement<SynOptgroup, []>;
 /**
  * @summary Options define the selectable items within various form controls such as [select](/components/select).
- * @documentation https://synergy.style/components/option
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
  * @status stable
  * @since 2.0
  *
@@ -952,7 +956,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynOptionJSXElement = SynCustomElement<SynOption, []>;
 /**
  * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
- * @documentation https://synergy.style/components/popup
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs
  * @status stable
  * @since 2.0
  *
@@ -987,6 +991,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * 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>
@@ -1017,7 +1022,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynPrioNavJSXElement = SynCustomElement<SynPrioNav, []>;
 /**
  * @summary Progress bars are used to show the status of an ongoing operation.
- * @documentation https://synergy.style/components/progress-bar
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
  * @status stable
  * @since 2.0
  *
@@ -1035,7 +1040,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ 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.style/components/progress-ring
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs
  * @status stable
  * @since 2.0
  *
@@ -1054,7 +1059,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Radios allow the user to select a single option from a group.
- * @documentation https://synergy.style/components/radio
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs
  * @status stable
  * @since 2.0
  *
@@ -1076,7 +1081,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
- * @documentation https://synergy.style/components/radio-button
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
  * @since 2.0
  *
@@ -1099,7 +1104,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @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.style/components/radio-group
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs
  * @status stable
  * @since 2.0
  *
@@ -1212,7 +1217,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Ticks visually improve positioning on range sliders.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs
  * @status stable
  *
  * @slot - The tick's label
@@ -1226,7 +1231,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynRangeTickJSXElement = SynCustomElement<SynRangeTick, []>;
 /**
  * @summary Selects allow you to choose items from a menu of predefined options.
- * @documentation https://synergy.style/components/select
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs
  * @status stable
  * @since 2.0
  *
@@ -1270,6 +1275,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * @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',
@@ -1379,7 +1385,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Spinners are used to show the progress of an indeterminate operation.
- * @documentation https://synergy.style/components/spinner
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
  * @status stable
  * @since 2.0
  *
@@ -1391,7 +1397,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynSpinnerJSXElement = SynCustomElement<SynSpinner, []>;
 /**
  * @summary Switches allow the user to toggle an option on or off.
- * @documentation https://synergy.style/components/switch
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs
  * @status stable
  * @since 2.0
  *
@@ -1437,7 +1443,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
- * @documentation https://synergy.style/components/tab
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs
  * @status stable
  * @since 2.0
  *
@@ -1455,7 +1461,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Tab groups organize content into a container that shows one section at a time.
- * @documentation https://synergy.style/components/tab-group
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
  * @status stable
  * @since 2.0
  *
@@ -1487,7 +1493,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
- * @documentation https://synergy.style/components/tab-panel
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs
  * @status stable
  * @since 2.0
  *
@@ -1499,7 +1505,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynTabPanelJSXElement = SynCustomElement<SynTabPanel, []>;
 /**
  * @summary Tags are used as labels to organize things or to indicate a selection.
- * @documentation https://synergy.style/components/tag
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs
  * @status stable
  * @since 2.0
  *
@@ -1518,7 +1524,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Textareas collect data from the user and allow multiple lines of text.
- * @documentation https://synergy.style/components/textarea
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
  * @status stable
  * @since 2.0
  *
@@ -1561,7 +1567,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
 ]>;
 /**
  * @summary Tooltips display additional information based on a specific action.
- * @documentation https://synergy.style/components/tooltip
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
  * @status stable
  * @since 2.0
  *
@@ -1608,7 +1614,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * @summary Validate provides form field validation messages in a unified way.
  * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
  * and showing the validation message in a consistent, user defined way.
- *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
  * @dependency syn-alert
  *
  * @slot - The form field that should be validated.
@@ -1640,7 +1646,7 @@ declare module 'react' {
              */ 'syn-accordion': SynAccordionJSXElement;
             /**
              * @summary Alerts are used to display important messages inline or as toast notifications.
-             * @documentation https://synergy.style/components/alert
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
              * @status stable
              * @since 2.0
              *
@@ -1665,7 +1671,7 @@ declare module 'react' {
              */ 'syn-alert': SynAlertJSXElement;
             /**
              * @summary Badges are used to draw attention and display statuses or counts.
-             * @documentation https://synergy.style/components/badge
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
              * @status stable
              * @since 2.0
              *
@@ -1675,7 +1681,7 @@ declare module 'react' {
              */ 'syn-badge': SynBadgeJSXElement;
             /**
              * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-             * @documentation https://synergy.style/components/breadcrumb
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
              * @status stable
              * @since 2.0
              *
@@ -1688,7 +1694,7 @@ declare module 'react' {
              */ 'syn-breadcrumb': SynBreadcrumbJSXElement;
             /**
              * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
-             * @documentation https://synergy.style/components/breadcrumb-item
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
              * @status stable
              * @since 2.0
              *
@@ -1706,7 +1712,7 @@ declare module 'react' {
              */ 'syn-breadcrumb-item': SynBreadcrumbItemJSXElement;
             /**
              * @summary Buttons represent actions that are available to the user.
-             * @documentation https://synergy.style/components/button
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
              * @status stable
              * @since 2.0
              *
@@ -1730,7 +1736,7 @@ declare module 'react' {
              */ 'syn-button': SynButtonJSXElement;
             /**
              * @summary Button groups can be used to group related buttons into sections.
-             * @documentation https://synergy.style/components/button-group
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
              * @status stable
              * @since 2.0
              *
@@ -1740,7 +1746,7 @@ declare module 'react' {
              */ 'syn-button-group': SynButtonGroupJSXElement;
             /**
              * @summary Cards can be used to group related subjects in a container.
-             * @documentation https://synergy.style/components/card
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
              * @status stable
              * @since 2.0
              *
@@ -1762,7 +1768,7 @@ declare module 'react' {
              */ 'syn-card': SynCardJSXElement;
             /**
              * @summary Checkboxes allow the user to toggle an option on or off.
-             * @documentation https://synergy.style/components/checkbox
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs
              * @status stable
              * @since 2.0
              *
@@ -1832,13 +1838,15 @@ declare module 'react' {
              * @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.
              *
              * @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.style/components/details
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs
              * @status stable
              * @since 2.0
              *
@@ -1866,7 +1874,7 @@ declare module 'react' {
              */ 'syn-details': SynDetailsJSXElement;
             /**
              * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
-             * @documentation https://synergy.style/components/dialog
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dialog--docs
              * @status stable
              * @since 2.0
              *
@@ -1916,7 +1924,7 @@ declare module 'react' {
              */ 'syn-dialog': SynDialogJSXElement;
             /**
              * @summary Dividers are used to visually separate or group elements.
-             * @documentation https://synergy.style/components/divider
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs
              * @status stable
              * @since 2.0
              *
@@ -1926,7 +1934,7 @@ declare module 'react' {
              */ 'syn-divider': SynDividerJSXElement;
             /**
              * @summary Drawers slide in from a container to expose additional options and information.
-             * @documentation https://synergy.style/components/drawer
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-drawer--docs
              * @status stable
              * @since 2.0
              *
@@ -1983,7 +1991,7 @@ declare module 'react' {
              */ 'syn-drawer': SynDrawerJSXElement;
             /**
              * @summary Dropdowns expose additional content that "drops down" in a panel.
-             * @documentation https://synergy.style/components/dropdown
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
              * @status stable
              * @since 2.0
              *
@@ -2007,6 +2015,7 @@ declare module 'react' {
              */ 'syn-dropdown': SynDropdownJSXElement;
             /**
              * @summary File controls allow selecting an arbitrary number of files for uploading.
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-file--docs
              * @status stable
              *
              * @dependency syn-button
@@ -2083,7 +2092,7 @@ declare module 'react' {
              */ 'syn-header': SynHeaderJSXElement;
             /**
              * @summary Icons are symbols that can be used to represent various options within an application.
-             * @documentation https://synergy.style/components/icon
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs
              * @status stable
              * @since 2.0
              *
@@ -2095,7 +2104,7 @@ declare module 'react' {
              */ 'syn-icon': SynIconJSXElement;
             /**
              * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
-             * @documentation https://synergy.style/components/icon-button
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs
              * @status stable
              * @since 2.0
              *
@@ -2108,7 +2117,7 @@ declare module 'react' {
              */ 'syn-icon-button': SynIconButtonJSXElement;
             /**
              * @summary Inputs collect data from the user.
-             * @documentation https://synergy.style/components/input
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs
              * @status stable
              * @since 2.0
              *
@@ -2155,7 +2164,7 @@ declare module 'react' {
              */ 'syn-input': SynInputJSXElement;
             /**
              * @summary Menus provide a list of options for the user to choose from.
-             * @documentation https://synergy.style/components/menu
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs
              * @status stable
              * @since 2.0
              *
@@ -2165,7 +2174,7 @@ declare module 'react' {
              */ 'syn-menu': SynMenuJSXElement;
             /**
              * @summary Menu items provide options for the user to pick from in a menu.
-             * @documentation https://synergy.style/components/menu-item
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-item--docs
              * @status stable
              * @since 2.0
              *
@@ -2191,7 +2200,7 @@ declare module 'react' {
              */ 'syn-menu-item': SynMenuItemJSXElement;
             /**
              * @summary Menu labels are used to describe a group of menu items.
-             * @documentation https://synergy.style/components/menu-label
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
              * @status stable
              * @since 2.0
              *
@@ -2207,6 +2216,7 @@ declare module 'react' {
              */ '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),
@@ -2274,7 +2284,7 @@ declare module 'react' {
              */ 'syn-optgroup': SynOptgroupJSXElement;
             /**
              * @summary Options define the selectable items within various form controls such as [select](/components/select).
-             * @documentation https://synergy.style/components/option
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
              * @status stable
              * @since 2.0
              *
@@ -2292,7 +2302,7 @@ declare module 'react' {
              */ 'syn-option': SynOptionJSXElement;
             /**
              * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
-             * @documentation https://synergy.style/components/popup
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs
              * @status stable
              * @since 2.0
              *
@@ -2325,6 +2335,7 @@ declare module 'react' {
              * 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>
@@ -2355,7 +2366,7 @@ declare module 'react' {
              */ 'syn-prio-nav': SynPrioNavJSXElement;
             /**
              * @summary Progress bars are used to show the status of an ongoing operation.
-             * @documentation https://synergy.style/components/progress-bar
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
              * @status stable
              * @since 2.0
              *
@@ -2373,7 +2384,7 @@ declare module 'react' {
              */ 'syn-progress-bar': SynProgressBarJSXElement;
             /**
              * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
-             * @documentation https://synergy.style/components/progress-ring
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs
              * @status stable
              * @since 2.0
              *
@@ -2391,7 +2402,7 @@ declare module 'react' {
              */ 'syn-progress-ring': SynProgressRingJSXElement;
             /**
              * @summary Radios allow the user to select a single option from a group.
-             * @documentation https://synergy.style/components/radio
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs
              * @status stable
              * @since 2.0
              *
@@ -2410,7 +2421,7 @@ declare module 'react' {
              */ '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.style/components/radio-button
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
              * @status stable
              * @since 2.0
              *
@@ -2430,7 +2441,7 @@ declare module 'react' {
              */ '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.style/components/radio-group
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs
              * @status stable
              * @since 2.0
              *
@@ -2505,7 +2516,7 @@ declare module 'react' {
              */ 'syn-range': SynRangeJSXElement;
             /**
              * @summary Ticks visually improve positioning on range sliders.
-             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs
              * @status stable
              *
              * @slot - The tick's label
@@ -2519,7 +2530,7 @@ declare module 'react' {
              */ 'syn-range-tick': SynRangeTickJSXElement;
             /**
              * @summary Selects allow you to choose items from a menu of predefined options.
-             * @documentation https://synergy.style/components/select
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs
              * @status stable
              * @since 2.0
              *
@@ -2563,6 +2574,7 @@ declare module 'react' {
              * @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.
@@ -2614,7 +2626,7 @@ declare module 'react' {
        */ 'syn-side-nav': SynSideNavJSXElement;
             /**
              * @summary Spinners are used to show the progress of an indeterminate operation.
-             * @documentation https://synergy.style/components/spinner
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
              * @status stable
              * @since 2.0
              *
@@ -2626,7 +2638,7 @@ declare module 'react' {
              */ 'syn-spinner': SynSpinnerJSXElement;
             /**
              * @summary Switches allow the user to toggle an option on or off.
-             * @documentation https://synergy.style/components/switch
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs
              * @status stable
              * @since 2.0
              *
@@ -2651,7 +2663,7 @@ declare module 'react' {
              */ '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.style/components/tab
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs
              * @status stable
              * @since 2.0
              *
@@ -2667,7 +2679,7 @@ declare module 'react' {
              */ 'syn-tab': SynTabJSXElement;
             /**
              * @summary Tab groups organize content into a container that shows one section at a time.
-             * @documentation https://synergy.style/components/tab-group
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
              * @status stable
              * @since 2.0
              *
@@ -2696,7 +2708,7 @@ declare module 'react' {
              */ 'syn-tab-group': SynTabGroupJSXElement;
             /**
              * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
-             * @documentation https://synergy.style/components/tab-panel
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs
              * @status stable
              * @since 2.0
              *
@@ -2708,7 +2720,7 @@ declare module 'react' {
              */ 'syn-tab-panel': SynTabPanelJSXElement;
             /**
              * @summary Tags are used as labels to organize things or to indicate a selection.
-             * @documentation https://synergy.style/components/tag
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs
              * @status stable
              * @since 2.0
              *
@@ -2725,7 +2737,7 @@ declare module 'react' {
              */ 'syn-tag': SynTagJSXElement;
             /**
              * @summary Textareas collect data from the user and allow multiple lines of text.
-             * @documentation https://synergy.style/components/textarea
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
              * @status stable
              * @since 2.0
              *
@@ -2747,7 +2759,7 @@ declare module 'react' {
              */ 'syn-textarea': SynTextareaJSXElement;
             /**
              * @summary Tooltips display additional information based on a specific action.
-             * @documentation https://synergy.style/components/tooltip
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
              * @status stable
              * @since 2.0
              *
@@ -2777,7 +2789,7 @@ declare module 'react' {
              * @summary Validate provides form field validation messages in a unified way.
              * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
              * and showing the validation message in a consistent, user defined way.
-             *
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
              * @dependency syn-alert
              *
              * @slot - The form field that should be validated.