@synergy-design-system/components 2.4.3 → 2.6.0

package/dist/custom-elements.json

@@ -3674,6 +3674,710 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/file/file.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynFile",
+          "cssParts": [
+            {
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
+            },
+            {
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
+            },
+            {
+              "description": "The input's wrapper.",
+              "name": "form-control-input"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The wrapper around the button and text value.",
+              "name": "button-wrapper"
+            },
+            {
+              "description": "The syn-button acting as a file input.",
+              "name": "button"
+            },
+            {
+              "description": "The syn-button's exported `base` part.",
+              "name": "button__base"
+            },
+            {
+              "description": "The chosen files or placeholder text for the file input.",
+              "name": "value"
+            },
+            {
+              "description": "The element wrapping the drop zone.",
+              "name": "droparea"
+            },
+            {
+              "description": "The background of the drop zone.",
+              "name": "droparea-background"
+            },
+            {
+              "description": "The container that wraps the icon for the drop zone.",
+              "name": "droparea-icon"
+            },
+            {
+              "description": "The text for the drop zone.",
+              "name": "droparea-value"
+            },
+            {
+              "description": "The container that wraps the trigger.",
+              "name": "trigger"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The file control's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
+            },
+            {
+              "description": "Optional droparea icon to use instead of the default. Works best with `<syn-icon>`.",
+              "name": "droparea-icon"
+            },
+            {
+              "description": "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.",
+              "name": "trigger"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{\n    'syn-button': SynButton,\n    'syn-icon': SynIcon,\n  }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['syn-change'],\n    // This makes sure the value sent in formdata events is always the files object\n    // @see internals/form.ts #handleFormData for more information\n    value: (el: SynFile) => el.files,\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label')"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "userIsDragging",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "files",
+              "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)",
+              "attribute": "files"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the file control, submitted as a name/value pair with form data.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The file control's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The file control's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the file control.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "droparea",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draw the file control as a drop area",
+              "attribute": "droparea"
+            },
+            {
+              "kind": "field",
+              "name": "accept",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Comma separated list of supported file types\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)",
+              "attribute": "accept"
+            },
+            {
+              "kind": "field",
+              "name": "capture",
+              "type": {
+                "text": "'user' | 'environment'"
+              },
+              "description": "Specifies the types of files that the server accepts.\nCan be set either to user or environment.\nWorks only when not using a droparea!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)",
+              "attribute": "capture"
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the user can select more than one file.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)",
+              "attribute": "multiple",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "webkitdirectory",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the file control should let the user select directories instead of files.\nWhen a directory is selected, the directory and its entire hierarchy of contents are included\nin the set of selected items.\nNote: This is a non-standard attribute but is supported in the major browsers.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)",
+              "attribute": "webkitdirectory",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`. The form must be in the same document\nor shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input a required field.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hideValue",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Suppress the value from being displayed in the file control",
+              "attribute": "hide-value"
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "button",
+              "type": {
+                "text": "SynButton"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dropareaWrapper",
+              "type": {
+                "text": "HTMLDivElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dropareaIcon",
+              "type": {
+                "text": "HTMLSpanElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inputChosen",
+              "type": {
+                "text": "HTMLSpanElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the button or droparea."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the button or droparea."
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFiles",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "files",
+                  "type": {
+                    "text": "FileList | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles the change event of the native input"
+            },
+            {
+              "kind": "method",
+              "name": "handleDragOver",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "DragEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDragLeave",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "DragEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDrop",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "DragEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private",
+              "description": "Handle the focus of the droparea and emit focus event"
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "Handle the blur of the droparea and emit blur event"
+            },
+            {
+              "kind": "method",
+              "name": "renderValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderDroparea",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderButton",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when an alteration to the control's value is committed by the user.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
+            },
+            {
+              "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.",
+              "name": "syn-error",
+              "reactName": "onSynError",
+              "eventName": "SynErrorEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "files",
+              "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)",
+              "fieldName": "files"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the file control, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The file control's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The file control's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the file control.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "droparea",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draw the file control as a drop area",
+              "fieldName": "droparea"
+            },
+            {
+              "name": "accept",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Comma separated list of supported file types\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)",
+              "fieldName": "accept"
+            },
+            {
+              "name": "capture",
+              "type": {
+                "text": "'user' | 'environment'"
+              },
+              "description": "Specifies the types of files that the server accepts.\nCan be set either to user or environment.\nWorks only when not using a droparea!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)",
+              "fieldName": "capture"
+            },
+            {
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the user can select more than one file.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)",
+              "fieldName": "multiple"
+            },
+            {
+              "name": "webkitdirectory",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the file control should let the user select directories instead of files.\nWhen a directory is selected, the directory and its entire hierarchy of contents are included\nin the set of selected items.\nNote: This is a non-standard attribute but is supported in the major browsers.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)",
+              "fieldName": "webkitdirectory"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`. The form must be in the same document\nor shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input a required field.",
+              "fieldName": "required"
+            },
+            {
+              "name": "hide-value",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Suppress the value from being displayed in the file control",
+              "fieldName": "hideValue"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "File controls allow selecting an arbitrary number of files for uploading.",
+          "tagNameWithoutPrefix": "file",
+          "tagName": "syn-file",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary File controls allow selecting an arbitrary number of files for uploading.\n * @status stable\n *\n * @dependency syn-button\n * @dependency syn-icon\n *\n * @slot label - The file control's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the file control.\n *    Alternatively, you can use the `help-text` attribute.\n * @slot droparea-icon - Optional droparea icon to use instead of the default.\n *    Works best with `<syn-icon>`.\n * @slot trigger - Optional content to be used as trigger instead of the default content.\n *    Opening the file dialog on click and as well as drag and drop will work for this content.\n *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,\n *    *hide-value*. Also if using the disabled attribute, the disabled styling will not be\n *    applied and must be taken care of yourself.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-error - Emitted when multiple files are selected via drag and drop, without\n * the `multiple` property being set.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-wrapper - The wrapper around the button and text value.\n * @csspart button - The syn-button acting as a file input.\n * @csspart button__base - The syn-button's exported `base` part.\n * @csspart value - The chosen files or placeholder text for the file input.\n * @csspart droparea - The element wrapping the drop zone.\n * @csspart droparea-background - The background of the drop zone.\n * @csspart droparea-icon - The container that wraps the icon for the drop zone.\n * @csspart droparea-value - The text for the drop zone.\n * @csspart trigger - The container that wraps the trigger.\n *\n * @animation file.iconDrop - The animation to use for the file icon\n * when a file is dropped\n * @animation file.text.disappear - The disappear animation to use for the file placeholder text\n * when a file is dropped\n * @animation file.text.appear - The appear animation to use for the file placeholder text\n * when a file is dropped\n */",
+          "status": "stable",
+          "dependencies": [
+            "syn-button",
+            "syn-icon"
+          ],
+          "animations": [
+            {
+              "name": "file.iconDrop",
+              "description": "The animation to use for the file icon when a file is dropped"
+            },
+            {
+              "name": "file.text.disappear",
+              "description": "The disappear animation to use for the file placeholder text when a file is dropped"
+            },
+            {
+              "name": "file.text.appear",
+              "description": "The appear animation to use for the file placeholder text when a file is dropped"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynFile",
+            "module": "components/file/file.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/header/header.js",
@@ -7902,11 +8606,220 @@
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setInitialAttributes",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Radios allow the user to select a single option from a group.",
+          "tagNameWithoutPrefix": "radio",
+          "tagName": "syn-radio",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://synergy.style/components/radio\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The radio's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */",
+          "documentation": "https://synergy.style/components/radio",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynRadio",
+            "module": "components/radio/radio.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/radio-button/radio-button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynRadioButton",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The internal `<button>` element.",
+              "name": "button"
+            },
+            {
+              "description": "The internal button element when the radio button is checked.",
+              "name": "button--checked"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the radio button's label.",
+              "name": "label"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The radio button's label.",
+              "name": ""
+            },
+            {
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
+            },
+            {
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')"
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hiddenInput",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
@@ -7926,6 +8839,17 @@
               "description": "The radio's value. When selected, the radio group will receive this value.",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio button.",
+              "attribute": "disabled",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -7933,59 +8857,77 @@
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+              "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "pill",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio.",
-              "attribute": "disabled",
+              "description": "Draws a pill-style radio button with rounded edges.",
+              "attribute": "pill",
               "reflects": true
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "handleBlur",
               "privacy": "private"
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "handleClick",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "handleFocus",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "setInitialAttributes",
-              "privacy": "private"
+              "name": "handleDisabledChange"
             },
             {
               "kind": "method",
-              "name": "handleCheckedChange"
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the radio button."
             },
             {
               "kind": "method",
-              "name": "handleDisabledChange"
+              "name": "blur",
+              "description": "Removes focus from the radio button."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the control loses focus.",
+              "description": "Emitted when the button loses focus.",
               "name": "syn-blur",
               "reactName": "onSynBlur",
               "eventName": "SynBlurEvent"
             },
             {
-              "description": "Emitted when the control gains focus.",
+              "description": "Emitted when the button gains focus.",
               "name": "syn-focus",
               "reactName": "onSynFocus",
               "eventName": "SynFocusEvent"
@@ -8000,40 +8942,46 @@
               "description": "The radio's value. When selected, the radio group will receive this value.",
               "fieldName": "value"
             },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio button.",
+              "fieldName": "disabled"
+            },
             {
               "name": "size",
               "type": {
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+              "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
               "fieldName": "size"
             },
             {
-              "name": "disabled",
+              "name": "pill",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio.",
-              "fieldName": "disabled"
+              "description": "Draws a pill-style radio button with rounded edges.",
+              "fieldName": "pill"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Radios allow the user to select a single option from a group.",
-          "tagNameWithoutPrefix": "radio",
-          "tagName": "syn-radio",
+          "summary": "Radios buttons allow the user to select a single option from a group using a button-like control.",
+          "tagNameWithoutPrefix": "radio-button",
+          "tagName": "syn-radio-button",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://synergy.style/components/radio\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The radio's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */",
-          "documentation": "https://synergy.style/components/radio",
+          "jsDoc": "/**\n * @summary Radios buttons allow the user to select a single option from a group using a button-like control.\n * @documentation https://synergy.style/components/radio-button\n * @status stable\n * @since 2.0\n *\n * @slot - The radio button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart button - The internal `<button>` element.\n * @csspart button--checked - The internal button element when the radio button is checked.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The container that wraps the radio button's label.\n * @csspart suffix - The container that wraps the suffix.\n */",
+          "documentation": "https://synergy.style/components/radio-button",
           "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "syn-icon"
-          ]
+          "since": "2.0"
         }
       ],
       "exports": [
@@ -8041,145 +8989,239 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynRadio",
-            "module": "components/radio/radio.js"
+            "name": "SynRadioButton",
+            "module": "components/radio-button/radio-button.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio-button/radio-button.js",
+      "path": "components/radio-group/radio-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynRadioButton",
+          "name": "SynRadioGroup",
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
             },
             {
-              "description": "The internal `<button>` element.",
-              "name": "button"
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
             },
             {
-              "description": "The internal button element when the radio button is checked.",
-              "name": "button--checked"
+              "description": "The input's wrapper.",
+              "name": "form-control-input"
             },
             {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "description": "The container that wraps the radio button's label.",
-              "name": "label"
+              "description": "The button group that wraps radio buttons.",
+              "name": "button-group"
             },
             {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
+              "description": "The button group's `base` part.",
+              "name": "button-group__base"
             }
           ],
           "slots": [
             {
-              "description": "The radio button's label.",
+              "description": "The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.",
               "name": ""
             },
             {
-              "description": "A presentational prefix icon or similar element.",
-              "name": "prefix"
+              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             },
             {
-              "description": "A presentational suffix icon or similar element.",
-              "name": "suffix"
+              "description": "Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-button-group': SynButtonGroup }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FormControlController(this)"
+            },
             {
               "kind": "field",
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')"
+              "default": "new HasSlotController(this, 'help-text', 'label')"
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "customValidityMessage",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "validationTimeout",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
               }
             },
             {
               "kind": "field",
-              "name": "hiddenInput",
+              "name": "validationInput",
               "type": {
                 "text": "HTMLInputElement"
               }
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "hasButtonGroup",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected",
+              "privacy": "private",
               "default": "false"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "errorMessage",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "'option'",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "form",
               "type": {
                 "text": "string"
               },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "attribute": "value"
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio button.",
-              "attribute": "disabled",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "attribute": "required",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
-              "attribute": "size",
-              "reflects": true
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style radio button with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "handleBlur",
+              "name": "getAllRadios",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleClick",
+              "name": "handleRadioClick",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "event",
                   "type": {
                     "text": "MouseEvent"
                   }
@@ -8188,64 +9230,151 @@
             },
             {
               "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleDisabledChange"
+              "name": "handleLabelClick",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "handleInvalid",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "event",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "Event"
                   }
                 }
-              ],
-              "description": "Sets focus on the radio button."
+              ]
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the radio button."
+              "name": "syncRadioElements",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "syncRadios",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateCheckedRadio",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSizeChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "default": "''"
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the button loses focus.",
-              "name": "syn-blur",
-              "reactName": "onSynBlur",
-              "eventName": "SynBlurEvent"
+              "description": "Emitted when the radio group's selected value changes.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
             },
             {
-              "description": "Emitted when the button gains focus.",
-              "name": "syn-focus",
-              "reactName": "onSynFocus",
-              "eventName": "SynFocusEvent"
+              "description": "Emitted when the radio group receives user input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "syn-invalid",
+              "reactName": "onSynInvalid",
+              "eventName": "SynInvalidEvent"
             }
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "fieldName": "value"
+              "default": "''",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "fieldName": "label"
             },
             {
-              "name": "disabled",
+              "name": "help-text",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the radio button.",
-              "fieldName": "disabled"
+              "default": "''",
+              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "'option'",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "fieldName": "value"
             },
             {
               "name": "size",
@@ -8253,31 +9382,43 @@
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
+              "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
               "fieldName": "size"
             },
             {
-              "name": "pill",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws a pill-style radio button with rounded edges.",
-              "fieldName": "pill"
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "fieldName": "required"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Radios buttons allow the user to select a single option from a group using a button-like control.",
-          "tagNameWithoutPrefix": "radio-button",
-          "tagName": "syn-radio-button",
+          "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.",
+          "tagNameWithoutPrefix": "radio-group",
+          "tagName": "syn-radio-group",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Radios buttons allow the user to select a single option from a group using a button-like control.\n * @documentation https://synergy.style/components/radio-button\n * @status stable\n * @since 2.0\n *\n * @slot - The radio button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart button - The internal `<button>` element.\n * @csspart button--checked - The internal button element when the radio button is checked.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The container that wraps the radio button's label.\n * @csspart suffix - The container that wraps the suffix.\n */",
-          "documentation": "https://synergy.style/components/radio-button",
+          "jsDoc": "/**\n * @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.\n * @documentation https://synergy.style/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */",
+          "documentation": "https://synergy.style/components/radio-group",
           "status": "stable",
-          "since": "2.0"
+          "since": "2.0",
+          "dependencies": [
+            "syn-button-group"
+          ]
         }
       ],
       "exports": [
@@ -8285,20 +9426,50 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynRadioButton",
-            "module": "components/radio-button/radio-button.js"
+            "name": "SynRadioGroup",
+            "module": "components/radio-group/radio-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio-group/radio-group.js",
+      "path": "components/range/range.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynRadioGroup",
+          "name": "SynRange",
+          "cssProperties": [
+            {
+              "description": "The size of a thumb.",
+              "name": "--thumb-size"
+            },
+            {
+              "description": "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).",
+              "name": "--thumb-hit-area-size"
+            },
+            {
+              "description": "The clickable area around the track (top and left).",
+              "name": "--track-hit-area-size"
+            },
+            {
+              "description": "Color of the track representing the current value.",
+              "name": "--track-color-active"
+            },
+            {
+              "description": "Color of the track that represents the remaining value.",
+              "name": "--track-color-inactive"
+            },
+            {
+              "description": "The height of the track.",
+              "name": "--track-height"
+            },
+            {
+              "description": "The point of origin of the active track, starting at the left side of the range.",
+              "name": "--track-active-offset"
+            }
+          ],
           "cssParts": [
             {
               "description": "The form control that wraps the label, input, and help text.",
@@ -8309,34 +9480,66 @@
               "name": "form-control-label"
             },
             {
-              "description": "The input's wrapper.",
-              "name": "form-control-input"
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the input track and ticks.",
+              "name": "input-wrapper"
+            },
+            {
+              "description": "The wrapper for the track.",
+              "name": "track-wrapper"
+            },
+            {
+              "description": "The inactive track.",
+              "name": "track"
+            },
+            {
+              "description": "The active track.",
+              "name": "active-track"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
             },
             {
-              "description": "The button group that wraps radio buttons.",
-              "name": "button-group"
+              "description": "The container that wraps the tick marks.",
+              "name": "ticks"
             },
             {
-              "description": "The button group's `base` part.",
-              "name": "button-group__base"
+              "description": "The thumb(s) that the user can drag to change the range.",
+              "name": "thumb"
             }
           ],
           "slots": [
             {
-              "description": "The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.",
-              "name": ""
+              "description": "The range's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             },
             {
-              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
-              "name": "label"
+              "description": "Used to prepend a presentational icon or similar element to the range.",
+              "name": "prefix"
             },
             {
-              "description": "Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.",
+              "description": "Used to append a presentational icon or similar element to the range.",
+              "name": "suffix"
+            },
+            {
+              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.",
               "name": "help-text"
+            },
+            {
+              "description": "Used to display tick marks at specific intervals along the range.",
+              "name": "ticks"
             }
           ],
           "members": [
@@ -8347,70 +9550,110 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'syn-button-group': SynButtonGroup }"
+              "default": "{\n    'syn-tooltip': SynTooltip,\n  }"
             },
             {
               "kind": "field",
-              "name": "formControlController",
-              "privacy": "protected",
-              "readonly": true,
-              "default": "new FormControlController(this)"
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'label')"
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "customValidityMessage",
+              "name": "helpText",
               "type": {
                 "text": "string"
               },
-              "privacy": "private",
-              "default": "''"
+              "default": "''",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "attribute": "help-text"
             },
             {
               "kind": "field",
-              "name": "validationTimeout",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the range.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "min",
               "type": {
                 "text": "number"
               },
-              "privacy": "private"
+              "default": "0",
+              "description": "The minimum acceptable value of the range.",
+              "attribute": "min"
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "max",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The maximum acceptable value of the range.",
+              "attribute": "max"
             },
             {
               "kind": "field",
-              "name": "validationInput",
+              "name": "step",
               "type": {
-                "text": "HTMLInputElement"
-              }
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The interval at which the range will increase and decrease.",
+              "attribute": "step"
             },
             {
               "kind": "field",
-              "name": "hasButtonGroup",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "'medium'",
+              "description": "The range's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "errorMessage",
+              "name": "tooltipPlacement",
               "type": {
-                "text": "string"
+                "text": "'top' | 'bottom' | 'none'"
               },
-              "privacy": "private",
-              "default": "''"
+              "default": "'top'",
+              "description": "The preferred placement of the range's tooltip. Use \"none\" to disable the tooltip",
+              "attribute": "tooltip-placement"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "valueAsArray",
+              "description": "Gets or sets the current values of the range as an array of numbers"
             },
             {
               "kind": "field",
@@ -8418,212 +9661,377 @@
               "type": {
                 "text": "string"
               },
-              "default": "''"
+              "default": "'0'",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "attribute": "label"
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form\nand associate it with the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "tooltipFormatter",
               "type": {
-                "text": "string"
+                "text": "(value: number) => string"
               },
-              "default": "''",
-              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text"
+              "description": "A function used to format the tooltip's value.\nThe value of the thumb is passed as the only argument.\nThe function should return a string to display in the tooltip."
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "baseDiv",
               "type": {
-                "text": "string"
-              },
-              "default": "'option'",
-              "description": "The name of the radio group, submitted as a name/value pair with form data.",
-              "attribute": "name"
+                "text": "HTMLDivElement"
+              }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "activeTrack",
               "type": {
-                "text": "string"
+                "text": "HTMLDivElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "thumbs",
+              "type": {
+                "text": "NodeListOf<HTMLDivElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label', 'prefix', 'suffix', 'ticks')"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-change'] })"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "#value",
+              "privacy": "private",
+              "type": {
+                "text": "readonly number[]"
               },
-              "default": "''",
-              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
-              "attribute": "value",
-              "reflects": true
+              "default": "[0]"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "#rangeValues",
+              "privacy": "private",
+              "default": "new Map<number, number>()"
+            },
+            {
+              "kind": "field",
+              "name": "#hasFocus",
+              "privacy": "private",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "boolean"
               },
-              "default": "'medium'",
-              "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
-              "attribute": "size",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "#validationError",
+              "privacy": "private",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "attribute": "form",
-              "reflects": true
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "#validationTimeout",
+              "privacy": "private",
               "type": {
-                "text": "boolean"
+                "text": "NodeJS.Timeout"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#nextId",
+              "privacy": "private",
+              "type": {
+                "text": "number"
+              },
+              "default": "1"
+            },
+            {
+              "kind": "field",
+              "name": "#lastChangeValue",
+              "privacy": "private",
+              "type": {
+                "text": "number []"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "#rtl",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "privacy": "public",
+              "description": "Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "privacy": "public",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
               },
-              "default": "false",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
-              "attribute": "required",
-              "reflects": true
+              "description": "Gets the associated form, if one exists."
             },
             {
               "kind": "field",
               "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "privacy": "public",
               "description": "Gets the validity state object",
               "readonly": true
             },
             {
               "kind": "field",
               "name": "validationMessage",
+              "privacy": "public",
               "description": "Gets the validation message",
               "readonly": true
             },
             {
               "kind": "method",
-              "name": "getAllRadios",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleRadioClick",
-              "privacy": "private",
+              "name": "#onClickTrack",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "PointerEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
+              "name": "#onClickThumb",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "PointerEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleLabelClick",
-              "privacy": "private"
+              "name": "#onDragThumb",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleInvalid",
-              "privacy": "private",
+              "name": "#onReleaseThumb",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "Event"
+                    "text": "PointerEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "syncRadioElements",
-              "privacy": "private"
+              "name": "#moveThumb",
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "HTMLDivElement"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "syncRadios",
-              "privacy": "private"
+              "name": "#updateActiveTrack"
             },
             {
               "kind": "method",
-              "name": "updateCheckedRadio",
-              "privacy": "private"
+              "name": "#onKeyPress",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleSizeChange"
+              "name": "#onBlur",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleValueChange"
+              "name": "#updateTooltip",
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "HTMLDivElement"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+              "name": "#onFocusThumb",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
+              "name": "#handleInvalid",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
                 }
-              },
-              "description": "Gets the associated form, if one exists."
+              ]
             },
             {
               "kind": "method",
-              "name": "reportValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+              "name": "#updatePrefixSuffixPosition"
             },
             {
               "kind": "method",
-              "name": "setCustomValidity",
+              "name": "renderThumbs",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "message",
-                  "default": "''"
+                  "name": "hasLabel",
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+              ]
             }
           ],
           "events": [
             {
-              "description": "Emitted when the radio group's selected value changes.",
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when an alteration to the control's value is committed by the user.",
               "name": "syn-change",
               "reactName": "onSynChange",
               "eventName": "SynChangeEvent"
             },
             {
-              "description": "Emitted when the radio group receives user input.",
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
               "name": "syn-input",
               "reactName": "onSynInput",
               "eventName": "SynInputEvent"
@@ -8633,16 +10041,31 @@
               "name": "syn-invalid",
               "reactName": "onSynInvalid",
               "eventName": "SynInvalidEvent"
+            },
+            {
+              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.",
+              "name": "syn-move",
+              "reactName": "onSynMove",
+              "eventName": "SynMoveEvent"
             }
           ],
           "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
             {
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
               "fieldName": "label"
             },
             {
@@ -8651,26 +10074,44 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
               "fieldName": "helpText"
             },
             {
-              "name": "name",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'option'",
-              "description": "The name of the radio group, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "default": "false",
+              "description": "Disables the range.",
+              "fieldName": "disabled"
             },
             {
-              "name": "value",
+              "name": "min",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
-              "fieldName": "value"
+              "default": "0",
+              "description": "The minimum acceptable value of the range.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The maximum acceptable value of the range.",
+              "fieldName": "max"
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The interval at which the range will increase and decrease.",
+              "fieldName": "step"
             },
             {
               "name": "size",
@@ -8678,43 +10119,133 @@
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
+              "description": "The range's size.",
               "fieldName": "size"
             },
+            {
+              "name": "tooltip-placement",
+              "type": {
+                "text": "'top' | 'bottom' | 'none'"
+              },
+              "default": "'top'",
+              "description": "The preferred placement of the range's tooltip. Use \"none\" to disable the tooltip",
+              "fieldName": "tooltipPlacement"
+            },
+            {
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
+              "fieldName": "value"
+            },
             {
               "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form\nand associate it with the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
               "fieldName": "form"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Ranges allow the user to select values within a given range using one or two thumbs.",
+          "tagNameWithoutPrefix": "range",
+          "tagName": "syn-range",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Ranges allow the user to select values within a given range using one or two thumbs.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @dependency syn-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the range.\n * @slot suffix - Used to append a presentational icon or similar element to the range.\n * @slot help-text - Text that describes how to use the range.\n * Alternatively, you can use the `help-text` attribute.\n * @slot ticks - Used to display tick marks at specific intervals along the range.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n * and its constraints aren't satisfied.\n * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.\n * Use `Event.preventDefault()` to prevent movement.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the input track and ticks.\n * @csspart track-wrapper - The wrapper for the track.\n * @csspart track - The inactive track.\n * @csspart active-track - The active track.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart ticks - The container that wraps the tick marks.\n * @csspart thumb - The thumb(s) that the user can drag to change the range.\n *\n * @cssproperty --thumb-size - The size of a thumb.\n * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.\n * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).\n * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).\n * @cssproperty --track-color-active - Color of the track representing the current value.\n * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The point of origin of the active track,\n * starting at the left side of the range.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs",
+          "status": "stable",
+          "dependencies": [
+            "syn-tooltip"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynRange",
+            "module": "components/range/range.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/range-tick/range-tick.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynRangeTick",
+          "cssProperties": [
+            {
+              "description": "The height of the tick marker.",
+              "name": "--tick-height"
             },
             {
-              "name": "required",
+              "description": "The top offset of the tick label.",
+              "name": "--tick-label-top"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The component's label.",
+              "name": "label"
+            },
+            {
+              "description": "The component's tick line.",
+              "name": "line"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tick's label",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "subdivision",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
-              "fieldName": "required"
+              "description": "Whether the tick should be shown as a subdivision.",
+              "attribute": "subdivision",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "subdivision",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tick should be shown as a subdivision.",
+              "fieldName": "subdivision"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "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.",
-          "tagNameWithoutPrefix": "radio-group",
-          "tagName": "syn-radio-group",
+          "summary": "Ticks visually improve positioning on range sliders.",
+          "tagNameWithoutPrefix": "range-tick",
+          "tagName": "syn-range-tick",
           "customElement": true,
-          "jsDoc": "/**\n * @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.\n * @documentation https://synergy.style/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */",
-          "documentation": "https://synergy.style/components/radio-group",
-          "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "syn-button-group"
-          ]
+          "jsDoc": "/**\n * @summary Ticks visually improve positioning on range sliders.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @slot - The tick's label\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The component's label.\n * @csspart line - The component's tick line.\n *\n * @cssproperty --tick-height - The height of the tick marker.\n * @cssproperty --tick-label-top - The top offset of the tick label.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs",
+          "status": "stable"
         }
       ],
       "exports": [
@@ -8722,8 +10253,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynRadioGroup",
-            "module": "components/radio-group/radio-group.js"
+            "name": "SynRangeTick",
+            "module": "components/range-tick/range-tick.js"
           }
         }
       ]
@@ -12562,7 +14093,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.4.3",
+    "version": "2.6.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"