@synergy-design-system/components 1.4.1 → 1.5.0

package/dist/custom-elements.json

@@ -616,6 +616,146 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/button-group/button-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynButtonGroup",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more `<syn-button>` elements to display in the button group.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disableRole",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOver",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOut",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Button groups can be used to group related buttons into sections.",
+          "tagNameWithoutPrefix": "button-group",
+          "tagName": "syn-button-group",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://synergy.style/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<syn-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy.style/components/button-group",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynButtonGroup",
+            "module": "components/button-group/button-group.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/checkbox/checkbox.js",
@@ -1050,261 +1190,121 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
+      "path": "components/divider/divider.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynButtonGroup",
-          "cssParts": [
+          "name": "SynDivider",
+          "cssProperties": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
+              "description": "The color of the divider.",
+              "name": "--color"
+            },
             {
-              "description": "One or more `<syn-button>` elements to display in the button group.",
-              "name": ""
+              "description": "The width of the divider.",
+              "name": "--width"
+            },
+            {
+              "description": "The spacing of the divider.",
+              "name": "--spacing"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "vertical",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the divider in a vertical orientation.",
+              "attribute": "vertical",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "disableRole",
+              "kind": "method",
+              "name": "handleVerticalChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "vertical",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Draws the divider in a vertical orientation.",
+              "fieldName": "vertical"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Dividers are used to visually separate or group elements.",
+          "tagNameWithoutPrefix": "divider",
+          "tagName": "syn-divider",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Dividers are used to visually separate or group elements.\n * @documentation https://synergy.style/components/divider\n * @status stable\n * @since 2.0\n *\n * @cssproperty --color - The color of the divider.\n * @cssproperty --width - The width of the divider.\n * @cssproperty --spacing - The spacing of the divider.\n */",
+          "documentation": "https://synergy.style/components/divider",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynDivider",
+            "module": "components/divider/divider.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/icon/icon.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynIcon",
+          "cssParts": [
+            {
+              "description": "The internal SVG element.",
+              "name": "svg"
             },
+            {
+              "description": "The <use> element generated when using `spriteSheet: true`",
+              "name": "use"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "label",
+              "name": "initialRender",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "attribute": "label"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "method",
-              "name": "handleFocus",
+              "name": "resolveIcon",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<SVGResult>"
+                }
+              },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "url",
                   "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseOver",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseOut",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Button groups can be used to group related buttons into sections.",
-          "tagNameWithoutPrefix": "button-group",
-          "tagName": "syn-button-group",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://synergy.style/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<syn-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://synergy.style/components/button-group",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynButtonGroup",
-            "module": "components/button-group/button-group.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/divider/divider.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynDivider",
-          "cssProperties": [
-            {
-              "description": "The color of the divider.",
-              "name": "--color"
-            },
-            {
-              "description": "The width of the divider.",
-              "name": "--width"
-            },
-            {
-              "description": "The spacing of the divider.",
-              "name": "--spacing"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the divider in a vertical orientation.",
-              "attribute": "vertical",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleVerticalChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the divider in a vertical orientation.",
-              "fieldName": "vertical"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Dividers are used to visually separate or group elements.",
-          "tagNameWithoutPrefix": "divider",
-          "tagName": "syn-divider",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Dividers are used to visually separate or group elements.\n * @documentation https://synergy.style/components/divider\n * @status stable\n * @since 2.0\n *\n * @cssproperty --color - The color of the divider.\n * @cssproperty --width - The width of the divider.\n * @cssproperty --spacing - The spacing of the divider.\n */",
-          "documentation": "https://synergy.style/components/divider",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynDivider",
-            "module": "components/divider/divider.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/icon/icon.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynIcon",
-          "cssParts": [
-            {
-              "description": "The internal SVG element.",
-              "name": "svg"
-            },
-            {
-              "description": "The <use> element generated when using `spriteSheet: true`",
-              "name": "use"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "initialRender",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "resolveIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<SVGResult>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "url",
-                  "type": {
-                    "text": "string"
+                    "text": "string"
                   }
                 },
                 {
@@ -2751,38 +2751,60 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio/radio.js",
+      "path": "components/optgroup/optgroup.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynRadio",
+          "name": "SynOptgroup",
+          "cssProperties": [
+            {
+              "description": "Display property of the divider. Defaults to \"block\"",
+              "name": "--display-divider"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The circular container that wraps the radio's checked state.",
-              "name": "control"
+              "description": "The container that wraps prefix, label and base",
+              "name": "label-container"
             },
             {
-              "description": "The radio control when the radio is checked.",
-              "name": "control--checked"
+              "description": "The divider that is displayed above the content",
+              "name": "divider"
             },
             {
-              "description": "The checked icon, an `<syn-icon>` element.",
-              "name": "checked-icon"
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
             },
             {
-              "description": "The container that wraps the radio's label.",
-              "name": "label"
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            },
+            {
+              "description": "The container that wraps the <syn-option> elements.",
+              "name": "options"
             }
           ],
           "slots": [
             {
-              "description": "The radio's label.",
+              "description": "The given options. Must be `<syn-option>` elements.",
               "name": ""
+            },
+            {
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
+            },
+            {
+              "description": "The label for the optgroup",
+              "name": "label"
+            },
+            {
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
             }
           ],
           "members": [
@@ -2793,141 +2815,88 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'syn-icon': SynIcon }"
+              "default": "{\n    'syn-divider': SynDivider,\n  }"
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix', 'label')"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleDisableOptions",
+              "privacy": "private",
+              "description": "Syncs the disabled prop for all slotted syn-options when it is triggered"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected",
-              "default": "false"
+              "default": "false",
+              "description": "Disables all options in the optgroup.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "label",
               "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"
+              "default": "''",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
             },
             {
               "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.",
+              "description": "Disables all options in the optgroup.",
               "fieldName": "disabled"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
             }
           ],
           "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": "The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.",
+          "tagNameWithoutPrefix": "optgroup",
+          "tagName": "syn-optgroup",
           "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 The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs\n * @status stable\n * @since 1.3.0\n *\n * @dependency syn-divider\n *\n * @slot - The given options. Must be `<syn-option>` elements.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot label - The label for the optgroup\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label-container - The container that wraps prefix, label and base\n * @csspart divider - The divider that is displayed above the content\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart options - The container that wraps the <syn-option> elements.\n *\n * @cssproperty --display-divider - Display property of the divider. Defaults to \"block\"\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs",
           "status": "stable",
-          "since": "2.0",
+          "since": "1.3.0",
           "dependencies": [
-            "syn-icon"
+            "syn-divider"
           ]
         }
       ],
@@ -2936,41 +2905,37 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynRadio",
-            "module": "components/radio/radio.js"
+            "name": "SynOptgroup",
+            "module": "components/optgroup/optgroup.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio-button/radio-button.js",
+      "path": "components/option/option.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynRadioButton",
+          "name": "SynOption",
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The checked icon, an `<syn-icon>` element.",
+              "name": "checked-icon"
             },
             {
-              "description": "The internal `<button>` element.",
-              "name": "button"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The internal button element when the radio button is checked.",
-              "name": "button--checked"
+              "description": "The option's label.",
+              "name": "label"
             },
             {
               "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"
@@ -2978,101 +2943,109 @@
           ],
           "slots": [
             {
-              "description": "The radio button's label.",
+              "description": "The option's label.",
               "name": ""
             },
             {
-              "description": "A presentational prefix icon or similar element.",
+              "description": "Used to prepend an icon or similar element to the menu item.",
               "name": "prefix"
             },
             {
-              "description": "A presentational suffix icon or similar element.",
+              "description": "Used to append an icon or similar element to the menu item.",
               "name": "suffix"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "hasSlotController",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "cachedTextLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')"
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "defaultSlot",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "HTMLSlotElement"
               }
             },
             {
               "kind": "field",
-              "name": "hiddenInput",
+              "name": "current",
               "type": {
-                "text": "HTMLInputElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "selected",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected",
               "default": "false"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "hasHover",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "attribute": "value"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the radio button.",
-              "attribute": "disabled",
+              "default": "''",
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+              "attribute": "value",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "disabled",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "boolean"
               },
-              "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",
+              "default": "false",
+              "description": "Draws the option in a disabled state, preventing selection.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleBlur",
+              "name": "handleDefaultSlotChange",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "name": "handleMouseEnter",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleFocus",
+              "name": "handleMouseLeave",
               "privacy": "private"
             },
             {
@@ -3081,36 +3054,16 @@
             },
             {
               "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the radio button."
+              "name": "handleSelectedChange"
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the radio button."
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the button loses focus.",
-              "name": "syn-blur",
-              "reactName": "onSynBlur",
-              "eventName": "SynBlurEvent"
+              "name": "handleValueChange"
             },
             {
-              "description": "Emitted when the button gains focus.",
-              "name": "syn-focus",
-              "reactName": "onSynFocus",
-              "eventName": "SynFocusEvent"
+              "kind": "method",
+              "name": "getTextLabel",
+              "description": "Returns a plain text label based on the option's content."
             }
           ],
           "attributes": [
@@ -3119,7 +3072,8 @@
               "type": {
                 "text": "string"
               },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "default": "''",
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
               "fieldName": "value"
             },
             {
@@ -3128,31 +3082,25 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio button.",
+              "description": "Draws the option in a disabled state, preventing selection.",
               "fieldName": "disabled"
-            },
-            {
-              "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.",
-              "fieldName": "size"
             }
           ],
           "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": "Options define the selectable items within various form controls such as [select](/components/select).",
+          "tagNameWithoutPrefix": "option",
+          "tagName": "syn-option",
           "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 Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://synergy.style/components/option\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */",
+          "documentation": "https://synergy.style/components/option",
           "status": "stable",
-          "since": "2.0"
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon"
+          ]
         }
       ],
       "exports": [
@@ -3160,40 +3108,989 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynRadioButton",
-            "module": "components/radio-button/radio-button.js"
+            "name": "SynOption",
+            "module": "components/option/option.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio-group/radio-group.js",
+      "path": "components/popup/popup.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynRadioGroup",
-          "cssParts": [
+          "name": "SynPopup",
+          "cssProperties": [
             {
-              "description": "The form control that wraps the label, input, and help text.",
-              "name": "form-control"
+              "description": "The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used.",
+              "name": "--arrow-size",
+              "default": "6px"
             },
             {
-              "description": "The label's wrapper.",
-              "name": "form-control-label"
+              "description": "The color of the arrow.",
+              "name": "--arrow-color",
+              "default": "var(--syn-color-neutral-0)"
             },
             {
-              "description": "The input's wrapper.",
-              "name": "form-control-input"
+              "description": "A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`.",
+              "name": "--auto-size-available-width"
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
-            },
+              "description": "A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`.",
+              "name": "--auto-size-available-height"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "The button group that wraps radio buttons.",
-              "name": "button-group"
+              "description": "The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.",
+              "name": "arrow"
+            },
+            {
+              "description": "The popup's container. Useful for setting a background color, box shadow, etc.",
+              "name": "popup"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The popup's content.",
+              "name": ""
+            },
+            {
+              "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.",
+              "name": "anchor"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "anchorEl",
+              "type": {
+                "text": "Element | VirtualElement | null"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "cleanup",
+              "type": {
+                "text": "ReturnType<typeof autoUpdate> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "popup",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript."
+            },
+            {
+              "kind": "field",
+              "name": "arrowEl",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "anchor",
+              "type": {
+                "text": "Element | string | VirtualElement"
+              },
+              "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
+              "attribute": "anchor"
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'top'",
+              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "strategy",
+              "type": {
+                "text": "'absolute' | 'fixed'"
+              },
+              "default": "'absolute'",
+              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
+              "attribute": "strategy",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "distance",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its anchor.",
+              "attribute": "distance"
+            },
+            {
+              "kind": "field",
+              "name": "skidding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its anchor.",
+              "attribute": "skidding"
+            },
+            {
+              "kind": "field",
+              "name": "arrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
+              "attribute": "arrow"
+            },
+            {
+              "kind": "field",
+              "name": "arrowPlacement",
+              "type": {
+                "text": "'start' | 'end' | 'center' | 'anchor'"
+              },
+              "default": "'anchor'",
+              "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
+              "attribute": "arrow-placement"
+            },
+            {
+              "kind": "field",
+              "name": "arrowPadding",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
+              "attribute": "arrow-padding"
+            },
+            {
+              "kind": "field",
+              "name": "flip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
+              "attribute": "flip"
+            },
+            {
+              "kind": "field",
+              "name": "flipFallbackPlacements",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
+              "attribute": "flip-fallback-placements"
+            },
+            {
+              "kind": "field",
+              "name": "flipFallbackStrategy",
+              "type": {
+                "text": "'best-fit' | 'initial'"
+              },
+              "default": "'best-fit'",
+              "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
+              "attribute": "flip-fallback-strategy"
+            },
+            {
+              "kind": "field",
+              "name": "flipBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "attribute": "flipBoundary"
+            },
+            {
+              "kind": "field",
+              "name": "flipPadding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+              "attribute": "flip-padding"
+            },
+            {
+              "kind": "field",
+              "name": "shift",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Moves the popup along the axis to keep it in view when clipped.",
+              "attribute": "shift"
+            },
+            {
+              "kind": "field",
+              "name": "shiftBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "attribute": "shiftBoundary"
+            },
+            {
+              "kind": "field",
+              "name": "shiftPadding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+              "attribute": "shift-padding"
+            },
+            {
+              "kind": "field",
+              "name": "autoSize",
+              "type": {
+                "text": "'horizontal' | 'vertical' | 'both'"
+              },
+              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+              "attribute": "auto-size"
+            },
+            {
+              "kind": "field",
+              "name": "sync",
+              "type": {
+                "text": "'width' | 'height' | 'both'"
+              },
+              "description": "Syncs the popup's width or height to that of the anchor element.",
+              "attribute": "sync"
+            },
+            {
+              "kind": "field",
+              "name": "autoSizeBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "attribute": "autoSizeBoundary"
+            },
+            {
+              "kind": "field",
+              "name": "autoSizePadding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+              "attribute": "auto-size-padding"
+            },
+            {
+              "kind": "method",
+              "name": "handleAnchorChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "start",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "stop",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reposition",
+              "description": "Forces the popup to recalculate and reposition itself."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.",
+              "name": "syn-reposition",
+              "reactName": "onSynReposition",
+              "eventName": "SynRepositionEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "anchor",
+              "type": {
+                "text": "Element | string | VirtualElement"
+              },
+              "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
+              "fieldName": "anchor"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
+              "fieldName": "active"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'top'",
+              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "strategy",
+              "type": {
+                "text": "'absolute' | 'fixed'"
+              },
+              "default": "'absolute'",
+              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
+              "fieldName": "strategy"
+            },
+            {
+              "name": "distance",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its anchor.",
+              "fieldName": "distance"
+            },
+            {
+              "name": "skidding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its anchor.",
+              "fieldName": "skidding"
+            },
+            {
+              "name": "arrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
+              "fieldName": "arrow"
+            },
+            {
+              "name": "arrow-placement",
+              "type": {
+                "text": "'start' | 'end' | 'center' | 'anchor'"
+              },
+              "default": "'anchor'",
+              "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
+              "fieldName": "arrowPlacement"
+            },
+            {
+              "name": "arrow-padding",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
+              "fieldName": "arrowPadding"
+            },
+            {
+              "name": "flip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
+              "fieldName": "flip"
+            },
+            {
+              "name": "flip-fallback-placements",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
+              "fieldName": "flipFallbackPlacements"
+            },
+            {
+              "name": "flip-fallback-strategy",
+              "type": {
+                "text": "'best-fit' | 'initial'"
+              },
+              "default": "'best-fit'",
+              "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
+              "fieldName": "flipFallbackStrategy"
+            },
+            {
+              "name": "flipBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "fieldName": "flipBoundary"
+            },
+            {
+              "name": "flip-padding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+              "fieldName": "flipPadding"
+            },
+            {
+              "name": "shift",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Moves the popup along the axis to keep it in view when clipped.",
+              "fieldName": "shift"
+            },
+            {
+              "name": "shiftBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "fieldName": "shiftBoundary"
+            },
+            {
+              "name": "shift-padding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+              "fieldName": "shiftPadding"
+            },
+            {
+              "name": "auto-size",
+              "type": {
+                "text": "'horizontal' | 'vertical' | 'both'"
+              },
+              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+              "fieldName": "autoSize"
+            },
+            {
+              "name": "sync",
+              "type": {
+                "text": "'width' | 'height' | 'both'"
+              },
+              "description": "Syncs the popup's width or height to that of the anchor element.",
+              "fieldName": "sync"
+            },
+            {
+              "name": "autoSizeBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "fieldName": "autoSizeBoundary"
+            },
+            {
+              "name": "auto-size-padding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+              "fieldName": "autoSizePadding"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.",
+          "tagNameWithoutPrefix": "popup",
+          "tagName": "syn-popup",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n * @documentation https://synergy.style/components/popup\n * @status stable\n * @since 2.0\n *\n * @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive\n *  operations in your listener or consider debouncing it.\n *\n * @slot - The popup's content.\n * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the\n *  `anchor` attribute or property instead.\n *\n * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are\n *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and\n *  maybe a border or box shadow.\n * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.\n *\n * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`\n *  attribute is used.\n * @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.\n * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n */",
+          "documentation": "https://synergy.style/components/popup",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynPopup",
+            "module": "components/popup/popup.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/radio/radio.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynRadio",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The circular container that wraps the radio's checked state.",
+              "name": "control"
+            },
+            {
+              "description": "The radio control when the radio is checked.",
+              "name": "control--checked"
+            },
+            {
+              "description": "The checked icon, an `<syn-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The container that wraps the radio's label.",
+              "name": "label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The radio's label.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon }"
+            },
+            {
+              "kind": "field",
+              "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": "HTMLInputElement"
+              }
+            },
+            {
+              "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": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio button.",
+              "attribute": "disabled",
+              "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
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the radio button."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the radio button."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the button loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the button 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": "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 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"
+            }
+          ],
+          "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",
+          "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",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynRadioButton",
+            "module": "components/radio-button/radio-button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/radio-group/radio-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynRadioGroup",
+          "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 button group that wraps radio buttons.",
+              "name": "button-group"
             },
             {
               "description": "The button group's `base` part.",
@@ -3202,12 +4099,501 @@
           ],
           "slots": [
             {
-              "description": "The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.",
+              "description": "The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.",
+              "name": ""
+            },
+            {
+              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            }
+          ],
+          "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, 'help-text', 'label')"
+            },
+            {
+              "kind": "field",
+              "name": "customValidityMessage",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "validationTimeout",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasButtonGroup",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "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"
+              },
+              "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": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "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": "getAllRadios",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleRadioClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleLabelClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "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 radio group's selected value changes.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
+            },
+            {
+              "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": "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.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "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",
+              "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.",
+              "fieldName": "size"
+            },
+            {
+              "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": "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": "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 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 *\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"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynRadioGroup",
+            "module": "components/radio-group/radio-group.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/select/select.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynSelect",
+          "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 select's wrapper.",
+              "name": "form-control-input"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The container the wraps the prefix, combobox, clear icon, and expand button.",
+              "name": "combobox"
+            },
+            {
+              "description": "The container that wraps the prefix slot.",
+              "name": "prefix"
+            },
+            {
+              "description": "The element that displays the selected option's label, an `<input>` element.",
+              "name": "display-input"
+            },
+            {
+              "description": "The listbox container where options are slotted.",
+              "name": "listbox"
+            },
+            {
+              "description": "The container that houses option tags when `multiselect` is used.",
+              "name": "tags"
+            },
+            {
+              "description": "The individual tags that represent each multiselect option.",
+              "name": "tag"
+            },
+            {
+              "description": "The tag's base part.",
+              "name": "tag__base"
+            },
+            {
+              "description": "The tag's content part.",
+              "name": "tag__content"
+            },
+            {
+              "description": "The tag's remove button.",
+              "name": "tag__remove-button"
+            },
+            {
+              "description": "The tag's remove button base part.",
+              "name": "tag__remove-button__base"
+            },
+            {
+              "description": "The clear button.",
+              "name": "clear-button"
+            },
+            {
+              "description": "The container that wraps the expand icon.",
+              "name": "expand-icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.",
               "name": ""
             },
             {
-              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.",
+              "description": "The input's label. Alternatively, you can use the `label` attribute.",
               "name": "label"
+            },
+            {
+              "description": "Used to prepend a presentational icon or similar element to the combobox.",
+              "name": "prefix"
+            },
+            {
+              "description": "An icon to use in lieu of the default clear icon.",
+              "name": "clear-icon"
+            },
+            {
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
+              "name": "expand-icon"
+            },
+            {
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
@@ -3218,14 +4604,14 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'syn-button-group': SynButtonGroup }"
+              "default": "{\n    'syn-icon': SynIcon,\n    'syn-popup': SynPopup,\n    'syn-tag': SynTag\n  }"
             },
             {
               "kind": "field",
               "name": "formControlController",
-              "privacy": "protected",
+              "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this)"
+              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  })"
             },
             {
               "kind": "field",
@@ -3236,7 +4622,14 @@
             },
             {
               "kind": "field",
-              "name": "customValidityMessage",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "typeToSelectString",
               "type": {
                 "text": "string"
               },
@@ -3245,7 +4638,7 @@
             },
             {
               "kind": "field",
-              "name": "validationTimeout",
+              "name": "typeToSelectTimeout",
               "type": {
                 "text": "number"
               },
@@ -3253,21 +4646,42 @@
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "popup",
+              "type": {
+                "text": "SynPopup"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "combobox",
               "type": {
                 "text": "HTMLSlotElement"
               }
             },
             {
               "kind": "field",
-              "name": "validationInput",
+              "name": "displayInput",
               "type": {
                 "text": "HTMLInputElement"
               }
             },
             {
               "kind": "field",
-              "name": "hasButtonGroup",
+              "name": "valueInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "listbox",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
               "type": {
                 "text": "boolean"
               },
@@ -3276,20 +4690,139 @@
             },
             {
               "kind": "field",
-              "name": "errorMessage",
+              "name": "displayLabel",
               "type": {
                 "text": "string"
               },
-              "privacy": "private",
               "default": "''"
             },
+            {
+              "kind": "field",
+              "name": "currentOption",
+              "type": {
+                "text": "SynOption"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selectedOptions",
+              "type": {
+                "text": "SynOption[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | string[]"
+              },
+              "default": "''",
+              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
+              "attribute": "value"
+            },
             {
               "kind": "field",
               "name": "defaultValue",
+              "type": {
+                "text": "string | 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 select's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
               "type": {
                 "text": "string"
               },
-              "default": "''"
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the select is empty.",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows more than one option to be selected.",
+              "attribute": "multiple",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "maxOptionsVisible",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "attribute": "max-options-visible"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the select control.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the select is not empty.",
+              "attribute": "clearable"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "attribute": "hoist"
             },
             {
               "kind": "field",
@@ -3298,9 +4831,20 @@
                 "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 select's label. If you need to display HTML, use the `label` slot instead.",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "default": "'bottom'",
+              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "helpText",
@@ -3308,111 +4852,248 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
               "attribute": "help-text"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "form",
               "type": {
                 "text": "string"
               },
-              "default": "'option'",
-              "description": "The name of the radio group, submitted as a name/value pair with form data.",
-              "attribute": "name"
+              "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": "value",
+              "name": "required",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
-              "attribute": "value",
+              "default": "false",
+              "description": "The select's required attribute.",
+              "attribute": "required",
               "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": "getTag",
+              "type": {
+                "text": "(option: SynOption, index: number) => TemplateResult | string | HTMLElement"
+              },
+              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
+              "attribute": "getTag"
+            },
+            {
+              "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": "addOpenListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "removeOpenListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDocumentFocusIn",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDocumentMouseDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleLabelClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleComboboxMouseDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleComboboxKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClearClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClearMouseDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleOptionClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "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.",
-              "attribute": "form",
-              "reflects": true
+              "kind": "method",
+              "name": "handleDefaultSlotChange",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
-              "attribute": "required",
-              "reflects": true
+              "kind": "method",
+              "name": "handleTagRemove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "SynRemoveEvent"
+                  }
+                },
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "kind": "method",
+              "name": "getAllOptions",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "kind": "method",
+              "name": "getFirstOption",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getAllRadios",
-              "privacy": "private"
+              "name": "setCurrentOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption | null"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleRadioClick",
+              "name": "setSelectedOptions",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "option",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "SynOption | SynOption[]"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "toggleOptionSelection",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "option",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "SynOption"
+                  }
+                },
+                {
+                  "name": "force",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleLabelClick",
+              "name": "selectionChanged",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "tags",
+              "privacy": "protected",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "handleInvalid",
@@ -3428,26 +5109,25 @@
             },
             {
               "kind": "method",
-              "name": "syncRadioElements",
-              "privacy": "private"
+              "name": "handleDisabledChange"
             },
             {
               "kind": "method",
-              "name": "syncRadios",
-              "privacy": "private"
+              "name": "handleValueChange"
             },
             {
               "kind": "method",
-              "name": "updateCheckedRadio",
-              "privacy": "private"
+              "name": "handleOpenChange"
             },
             {
               "kind": "method",
-              "name": "handleSizeChange"
+              "name": "show",
+              "description": "Shows the listbox."
             },
             {
               "kind": "method",
-              "name": "handleValueChange"
+              "name": "hide",
+              "description": "Hides the listbox."
             },
             {
               "kind": "method",
@@ -3467,11 +5147,6 @@
             {
               "kind": "method",
               "name": "reportValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
               "description": "Checks for validity and shows the browser's validation message if the control is invalid."
             },
             {
@@ -3480,25 +5155,88 @@
               "parameters": [
                 {
                   "name": "message",
-                  "default": "''"
+                  "type": {
+                    "text": "string"
+                  }
                 }
               ],
               "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the control."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the control."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the radio group's selected value changes.",
+              "description": "Emitted when the control's value changes.",
               "name": "syn-change",
               "reactName": "onSynChange",
               "eventName": "SynChangeEvent"
             },
             {
-              "description": "Emitted when the radio group receives user input.",
+              "description": "Emitted when the control's value is cleared.",
+              "name": "syn-clear",
+              "reactName": "onSynClear",
+              "eventName": "SynClearEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
               "name": "syn-input",
               "reactName": "onSynInput",
               "eventName": "SynInputEvent"
             },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            },
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the select's menu opens.",
+              "name": "syn-show",
+              "reactName": "onSynShow",
+              "eventName": "SynShowEvent"
+            },
+            {
+              "description": "Emitted after the select's menu opens and all animations are complete.",
+              "name": "syn-after-show",
+              "reactName": "onSynAfterShow",
+              "eventName": "SynAfterShowEvent"
+            },
+            {
+              "description": "Emitted when the select's menu closes.",
+              "name": "syn-hide",
+              "reactName": "onSynHide",
+              "eventName": "SynHideEvent"
+            },
+            {
+              "description": "Emitted after the select's menu closes and all animations are complete.",
+              "name": "syn-after-hide",
+              "reactName": "onSynAfterHide",
+              "eventName": "SynAfterHideEvent"
+            },
             {
               "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
               "name": "syn-invalid",
@@ -3508,49 +5246,121 @@
           ],
           "attributes": [
             {
-              "name": "label",
+              "name": "name",
               "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.",
-              "fieldName": "label"
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
-              "name": "help-text",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "string | string[]"
               },
               "default": "''",
-              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**",
+              "fieldName": "value"
             },
             {
-              "name": "name",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The select's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "placeholder",
               "type": {
                 "text": "string"
               },
-              "default": "'option'",
-              "description": "The name of the radio group, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the select is empty.",
+              "fieldName": "placeholder"
             },
             {
-              "name": "value",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows more than one option to be selected.",
+              "fieldName": "multiple"
+            },
+            {
+              "name": "max-options-visible",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "fieldName": "maxOptionsVisible"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the select control.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the select is not empty.",
+              "fieldName": "clearable"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
+              "fieldName": "open"
+            },
+            {
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
+            },
+            {
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
-              "fieldName": "value"
+              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
             },
             {
-              "name": "size",
+              "name": "placement",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "'top' | 'bottom'"
               },
-              "default": "'medium'",
-              "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
-              "fieldName": "size"
+              "default": "'bottom'",
+              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
             },
             {
               "name": "form",
@@ -3567,24 +5377,34 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "description": "The select's required attribute.",
               "fieldName": "required"
+            },
+            {
+              "name": "getTag",
+              "type": {
+                "text": "(option: SynOption, index: number) => TemplateResult | string | HTMLElement"
+              },
+              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
+              "fieldName": "getTag"
             }
           ],
           "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": "Selects allow you to choose items from a menu of predefined options.",
+          "tagNameWithoutPrefix": "select",
+          "tagName": "syn-select",
           "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 *\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",
+          "jsDoc": "/**\n * @summary Selects allow you to choose items from a menu of predefined options.\n * @documentation https://synergy.style/components/select\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-tag\n *\n * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the select's menu opens.\n * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the select's menu closes.\n * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.\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 select's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart display-input - The element that displays the selected option's label, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__base - The tag's base part.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__base - The tag's remove button base part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n */",
+          "documentation": "https://synergy.style/components/select",
           "status": "stable",
           "since": "2.0",
           "dependencies": [
-            "syn-button-group"
+            "syn-icon",
+            "syn-popup",
+            "syn-tag"
           ]
         }
       ],
@@ -3593,8 +5413,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynRadioGroup",
-            "module": "components/radio-group/radio-group.js"
+            "name": "SynSelect",
+            "module": "components/select/select.js"
           }
         }
       ]
@@ -4971,7 +6791,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.4.1",
+    "version": "1.5.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"