@synergy-design-system/components 2.5.0 → 2.7.0

package/dist/custom-elements.json

@@ -819,14 +819,14 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-icon': SynIcon,\n    'syn-spinner': SynSpinner\n  }"
+              "default": "{ 'syn-icon': SynIcon, 'syn-spinner': SynSpinner }"
             },
             {
               "kind": "field",
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['click']\n  })"
+              "default": "new FormControlController(this, { assumeInteractionOn: ['click'] })"
             },
             {
               "kind": "field",
@@ -1727,7 +1727,7 @@
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, {\n    value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynCheckbox) => control.defaultChecked,\n    setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n  })"
+              "default": "new FormControlController(this, { value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: SynCheckbox) => control.defaultChecked, setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked) })"
             },
             {
               "kind": "field",
@@ -2182,7 +2182,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-icon': SynIcon\n  }"
+              "default": "{ 'syn-icon': SynIcon }"
             },
             {
               "kind": "field",
@@ -2524,7 +2524,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-icon-button': SynIconButton\n  }"
+              "default": "{ 'syn-icon-button': SynIconButton }"
             },
             {
               "kind": "field",
@@ -3283,9 +3283,13 @@
           "name": "SynDropdown",
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
+              "description": "The component's base wrapper, an `<syn-popup>` element.",
               "name": "base"
             },
+            {
+              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
+              "name": "base__popup"
+            },
             {
               "description": "The container that wraps the trigger.",
               "name": "trigger"
@@ -3644,7 +3648,7 @@
           "tagNameWithoutPrefix": "dropdown",
           "tagName": "syn-dropdown",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https://synergy.style/components/dropdown\n * @status stable\n * @since 2.0\n *\n * @dependency syn-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.\n *\n * @event syn-show - Emitted when the dropdown opens.\n * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event syn-hide - Emitted when the dropdown closes.\n * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */",
+          "jsDoc": "/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https://synergy.style/components/dropdown\n * @status stable\n * @since 2.0\n *\n * @dependency syn-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.\n *\n * @event syn-show - Emitted when the dropdown opens.\n * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event syn-hide - Emitted when the dropdown closes.\n * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `<syn-popup>` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */",
           "documentation": "https://synergy.style/components/dropdown",
           "status": "stable",
           "since": "2.0",
@@ -3762,14 +3766,14 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-button': SynButton,\n    'syn-icon': SynIcon,\n  }"
+              "default": "{ 'syn-button': SynButton, 'syn-icon': SynIcon, }"
             },
             {
               "kind": "field",
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['syn-change'],\n    // This makes sure the value sent in formdata events is always the files object\n    // @see internals/form.ts #handleFormData for more information\n    value: (el: SynFile) => el.files,\n  })"
+              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-change'], // This makes sure the value sent in formdata events is always the files object // @see internals/form.ts #handleFormData for more information value: (el: SynFile) => el.files, })"
             },
             {
               "kind": "field",
@@ -4450,7 +4454,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-icon': SynIcon,\n  }"
+              "default": "{ 'syn-icon': SynIcon, }"
             },
             {
               "kind": "field",
@@ -5227,14 +5231,14 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n\t\t'syn-icon': SynIcon,\n\t\t'syn-divider': SynDivider\n\t}"
+              "default": "{ 'syn-icon': SynIcon, 'syn-divider': SynDivider }"
             },
             {
               "kind": "field",
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  })"
+              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-blur', 'syn-input'] })"
             },
             {
               "kind": "field",
@@ -6332,7 +6336,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-icon': SynIcon,\n    'syn-popup': SynPopup,\n    'syn-spinner': SynSpinner\n  }"
+              "default": "{ 'syn-icon': SynIcon, 'syn-popup': SynPopup, 'syn-spinner': SynSpinner }"
             },
             {
               "kind": "field",
@@ -6409,13 +6413,6 @@
               "attribute": "disabled",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
             {
               "kind": "field",
               "name": "hasSlotController",
@@ -6430,7 +6427,7 @@
                 "text": "SubmenuController"
               },
               "privacy": "private",
-              "default": "new SubmenuController(this, this.hasSlotController, this.localize)"
+              "default": "new SubmenuController(this, this.hasSlotController)"
             },
             {
               "kind": "method",
@@ -6588,7 +6585,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-divider': SynDivider,\n  }"
+              "default": "{ 'syn-divider': SynDivider, }"
             }
           ],
           "superclass": {
@@ -6709,7 +6706,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-divider': SynDivider,\n  }"
+              "default": "{ 'syn-divider': SynDivider, }"
             },
             {
               "kind": "field",
@@ -7204,7 +7201,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-divider': SynDivider,\n  }"
+              "default": "{ 'syn-divider': SynDivider, }"
             },
             {
               "kind": "field",
@@ -8111,7 +8108,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-dropdown': SynDropdown,\n    'syn-icon': SynIcon,\n    'syn-menu': SynMenu,\n    'syn-nav-item': SynNavItem,\n  }"
+              "default": "{ 'syn-dropdown': SynDropdown, 'syn-icon': SynIcon, 'syn-menu': SynMenu, 'syn-nav-item': SynNavItem, }"
             },
             {
               "kind": "field",
@@ -9434,102 +9431,112 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/select/select.js",
+      "path": "components/range/range.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynSelect",
-          "cssParts": [
+          "name": "SynRange",
+          "cssProperties": [
             {
-              "description": "The form control that wraps the label, input, and help text.",
-              "name": "form-control"
+              "description": "The size of a thumb.",
+              "name": "--thumb-size"
             },
             {
-              "description": "The label's wrapper.",
-              "name": "form-control-label"
+              "description": "The clickable area around the thumb. Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).",
+              "name": "--thumb-hit-area-size"
             },
             {
-              "description": "The select's wrapper.",
-              "name": "form-control-input"
+              "description": "The clickable area around the track (top and left).",
+              "name": "--track-hit-area-size"
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
+              "description": "Color of the track representing the current value.",
+              "name": "--track-color-active"
             },
             {
-              "description": "The container the wraps the prefix, combobox, clear icon, and expand button.",
-              "name": "combobox"
+              "description": "Color of the track that represents the remaining value.",
+              "name": "--track-color-inactive"
             },
             {
-              "description": "The container that wraps the prefix slot.",
-              "name": "prefix"
+              "description": "The height of the track.",
+              "name": "--track-height"
             },
             {
-              "description": "The element that displays the selected option's label, an `<input>` element.",
-              "name": "display-input"
+              "description": "The point of origin of the active track, starting at the left side of the range.",
+              "name": "--track-active-offset"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
             },
             {
-              "description": "The listbox container where options are slotted.",
-              "name": "listbox"
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
             },
             {
-              "description": "The container that houses option tags when `multiselect` is used.",
-              "name": "tags"
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "description": "The individual tags that represent each multiselect option.",
-              "name": "tag"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The tag's base part.",
-              "name": "tag__base"
+              "description": "The container that wraps the input track and ticks.",
+              "name": "input-wrapper"
             },
             {
-              "description": "The tag's content part.",
-              "name": "tag__content"
+              "description": "The wrapper for the track.",
+              "name": "track-wrapper"
             },
             {
-              "description": "The tag's remove button.",
-              "name": "tag__remove-button"
+              "description": "The inactive track.",
+              "name": "track"
             },
             {
-              "description": "The tag's remove button base part.",
-              "name": "tag__remove-button__base"
+              "description": "The active track.",
+              "name": "active-track"
             },
             {
-              "description": "The clear button.",
-              "name": "clear-button"
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
             },
             {
-              "description": "The container that wraps the expand icon.",
-              "name": "expand-icon"
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            },
+            {
+              "description": "The container that wraps the tick marks.",
+              "name": "ticks"
+            },
+            {
+              "description": "The thumb(s) that the user can drag to change the range.",
+              "name": "thumb"
             }
           ],
           "slots": [
             {
-              "description": "The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.",
-              "name": ""
-            },
-            {
-              "description": "The input's label. Alternatively, you can use the `label` attribute.",
+              "description": "The range's label. Alternatively, you can use the `label` attribute.",
               "name": "label"
             },
             {
-              "description": "Used to prepend a presentational icon or similar element to the combobox.",
+              "description": "Used to prepend a presentational icon or similar element to the range.",
               "name": "prefix"
             },
             {
-              "description": "An icon to use in lieu of the default clear icon.",
-              "name": "clear-icon"
+              "description": "Used to append a presentational icon or similar element to the range.",
+              "name": "suffix"
             },
             {
-              "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 range. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             },
             {
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
+              "description": "Used to display tick marks at specific intervals along the range.",
+              "name": "ticks"
             }
           ],
           "members": [
@@ -9540,195 +9547,1032 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-icon': SynIcon,\n    'syn-popup': SynPopup,\n    'syn-tag': SynTag\n  }"
+              "default": "{ 'syn-tooltip': SynTooltip, }"
             },
             {
               "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  })"
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'label')"
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "attribute": "help-text"
             },
             {
               "kind": "field",
-              "name": "typeToSelectString",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "''"
+              "default": "false",
+              "description": "Disables the range.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "typeToSelectTimeout",
+              "name": "min",
               "type": {
                 "text": "number"
               },
-              "privacy": "private"
+              "default": "0",
+              "description": "The minimum acceptable value of the range.",
+              "attribute": "min"
             },
             {
               "kind": "field",
-              "name": "closeWatcher",
+              "name": "max",
               "type": {
-                "text": "CloseWatcher | null"
+                "text": "number"
               },
-              "privacy": "private"
+              "default": "100",
+              "description": "The maximum acceptable value of the range.",
+              "attribute": "max"
             },
             {
               "kind": "field",
-              "name": "popup",
+              "name": "step",
               "type": {
-                "text": "SynPopup"
-              }
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The interval at which the range will increase and decrease.",
+              "attribute": "step"
             },
             {
               "kind": "field",
-              "name": "combobox",
+              "name": "size",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The range's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "displayInput",
+              "name": "tooltipPlacement",
               "type": {
-                "text": "HTMLInputElement"
-              }
+                "text": "'top' | 'bottom' | 'none'"
+              },
+              "default": "'top'",
+              "description": "The preferred placement of the range's tooltip. Use \"none\" to disable the tooltip",
+              "attribute": "tooltip-placement"
             },
             {
               "kind": "field",
-              "name": "valueInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "listbox",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "name": "valueAsArray",
+              "description": "Gets or sets the current values of the range as an array of numbers"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "defaultValue",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "'0'",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
               "kind": "field",
-              "name": "displayLabel",
+              "name": "form",
               "type": {
                 "text": "string"
               },
-              "default": "''"
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form\nand associate it with the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "currentOption",
+              "name": "tooltipFormatter",
               "type": {
-                "text": "SynOption"
-              }
+                "text": "(value: number) => string"
+              },
+              "description": "A function used to format the tooltip's value.\nThe value of the thumb is passed as the only argument.\nThe function should return a string to display in the tooltip."
             },
             {
               "kind": "field",
-              "name": "selectedOptions",
+              "name": "baseDiv",
               "type": {
-                "text": "SynOption[]"
-              },
-              "default": "[]"
+                "text": "HTMLDivElement"
+              }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "activeTrack",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the select, submitted as a name/value pair with form data.",
-              "attribute": "name"
+                "text": "HTMLDivElement"
+              }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "thumbs",
               "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"
+                "text": "NodeListOf<HTMLDivElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "defaultValue",
+              "name": "validationInput",
               "type": {
-                "text": "string | string[]"
-              },
-              "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The select's size.",
-              "attribute": "size",
-              "reflects": true
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label', 'prefix', 'suffix', 'ticks')"
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Placeholder text to show as a hint when the select is empty.",
-              "attribute": "placeholder"
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-change'] })"
             },
             {
               "kind": "field",
-              "name": "multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Allows more than one option to be selected.",
-              "attribute": "multiple",
-              "reflects": true
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "maxOptionsVisible",
+              "name": "#value",
+              "privacy": "private",
               "type": {
-                "text": "number"
+                "text": "readonly 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"
+              "default": "[0]"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "#rangeValues",
+              "privacy": "private",
+              "default": "new Map<number, number>()"
+            },
+            {
+              "kind": "field",
+              "name": "#hasFocus",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#validationError",
+              "privacy": "private",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "#validationTimeout",
+              "privacy": "private",
+              "type": {
+                "text": "NodeJS.Timeout"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#nextId",
+              "privacy": "private",
+              "type": {
+                "text": "number"
+              },
+              "default": "1"
+            },
+            {
+              "kind": "field",
+              "name": "#lastChangeValue",
+              "privacy": "private",
+              "type": {
+                "text": "number []"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "#rtl",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "privacy": "public",
+              "description": "Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "privacy": "public",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "privacy": "public",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "privacy": "public",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#onClickTrack",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onClickThumb",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onDragThumb",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onReleaseThumb",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#moveThumb",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "HTMLDivElement"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#updateActiveTrack",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#onKeyPress",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onBlur",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#updateTooltip",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "HTMLDivElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#onFocusThumb",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#updatePrefixSuffixPosition",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderThumbs",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "hasLabel",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when an alteration to the control's value is committed by the user.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "syn-invalid",
+              "reactName": "onSynInvalid",
+              "eventName": "SynInvalidEvent"
+            },
+            {
+              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.",
+              "name": "syn-move",
+              "reactName": "onSynMove",
+              "eventName": "SynMoveEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the range.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The minimum acceptable value of the range.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The maximum acceptable value of the range.",
+              "fieldName": "max"
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The interval at which the range will increase and decrease.",
+              "fieldName": "step"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The range's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "tooltip-placement",
+              "type": {
+                "text": "'top' | 'bottom' | 'none'"
+              },
+              "default": "'top'",
+              "description": "The preferred placement of the range's tooltip. Use \"none\" to disable the tooltip",
+              "fieldName": "tooltipPlacement"
+            },
+            {
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
+              "fieldName": "value"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form\nand associate it with the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
+              "fieldName": "form"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Ranges allow the user to select values within a given range using one or two thumbs.",
+          "tagNameWithoutPrefix": "range",
+          "tagName": "syn-range",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Ranges allow the user to select values within a given range using one or two thumbs.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @dependency syn-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the range.\n * @slot suffix - Used to append a presentational icon or similar element to the range.\n * @slot help-text - Text that describes how to use the range.\n * Alternatively, you can use the `help-text` attribute.\n * @slot ticks - Used to display tick marks at specific intervals along the range.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n * and its constraints aren't satisfied.\n * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.\n * Use `Event.preventDefault()` to prevent movement.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the input track and ticks.\n * @csspart track-wrapper - The wrapper for the track.\n * @csspart track - The inactive track.\n * @csspart active-track - The active track.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart ticks - The container that wraps the tick marks.\n * @csspart thumb - The thumb(s) that the user can drag to change the range.\n *\n * @cssproperty --thumb-size - The size of a thumb.\n * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.\n * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).\n * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).\n * @cssproperty --track-color-active - Color of the track representing the current value.\n * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The point of origin of the active track,\n * starting at the left side of the range.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs",
+          "status": "stable",
+          "dependencies": [
+            "syn-tooltip"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynRange",
+            "module": "components/range/range.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/range-tick/range-tick.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynRangeTick",
+          "cssProperties": [
+            {
+              "description": "The height of the tick marker.",
+              "name": "--tick-height"
+            },
+            {
+              "description": "The top offset of the tick label.",
+              "name": "--tick-label-top"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The component's label.",
+              "name": "label"
+            },
+            {
+              "description": "The component's tick line.",
+              "name": "line"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tick's label",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "subdivision",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tick should be shown as a subdivision.",
+              "attribute": "subdivision",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "subdivision",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tick should be shown as a subdivision.",
+              "fieldName": "subdivision"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Ticks visually improve positioning on range sliders.",
+          "tagNameWithoutPrefix": "range-tick",
+          "tagName": "syn-range-tick",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Ticks visually improve positioning on range sliders.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @slot - The tick's label\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The component's label.\n * @csspart line - The component's tick line.\n *\n * @cssproperty --tick-height - The height of the tick marker.\n * @cssproperty --tick-label-top - The top offset of the tick label.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs",
+          "status": "stable"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynRangeTick",
+            "module": "components/range-tick/range-tick.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, suffix, combobox, clear icon, and expand button.",
+              "name": "combobox"
+            },
+            {
+              "description": "The container that wraps the prefix slot.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix slot.",
+              "name": "suffix"
+            },
+            {
+              "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 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": "Used to append a presentational icon or similar element to the combobox.",
+              "name": "suffix"
+            },
+            {
+              "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": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon, 'syn-popup': SynPopup, 'syn-tag': SynTag }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-blur', 'syn-input'] })"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label')"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "typeToSelectString",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "typeToSelectTimeout",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "closeWatcher",
+              "type": {
+                "text": "CloseWatcher | null"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "popup",
+              "type": {
+                "text": "SynPopup"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "combobox",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "displayInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "valueInput",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "listbox",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "displayLabel",
+              "type": {
+                "text": "string"
+              },
+              "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": "''",
+              "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"
               },
@@ -10341,7 +11185,7 @@
           "tagNameWithoutPrefix": "select",
           "tagName": "syn-select",
           "customElement": true,
-          "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 */",
+          "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 suffix - Used to append 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, suffix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix 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",
@@ -10429,7 +11273,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    'syn-divider': SynDivider,\n    'syn-drawer': SynDrawer,\n  }"
+              "default": "{ 'syn-divider': SynDivider, 'syn-drawer': SynDrawer, }"
             },
             {
               "kind": "field",
@@ -10821,7 +11665,7 @@
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, {\n    value: (control: SynSwitch) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynSwitch) => control.defaultChecked,\n    setValue: (control: SynSwitch, checked: boolean) => (control.checked = checked)\n  })"
+              "default": "new FormControlController(this, { value: (control: SynSwitch) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: SynSwitch) => control.defaultChecked, setValue: (control: SynSwitch, checked: boolean) => (control.checked = checked) })"
             },
             {
               "kind": "field",
@@ -11309,7 +12153,8 @@
               },
               "default": "false",
               "description": "Makes the tab closable and shows a close button.",
-              "attribute": "closable"
+              "attribute": "closable",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -11342,25 +12187,6 @@
             {
               "kind": "method",
               "name": "handleDisabledChange"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus to the tab."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the tab."
             }
           ],
           "events": [
@@ -11561,6 +12387,15 @@
               "privacy": "private",
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "focusableTabs",
+              "type": {
+                "text": "SynTab[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
             {
               "kind": "field",
               "name": "panels",
@@ -11660,16 +12495,7 @@
             {
               "kind": "method",
               "name": "getAllTabs",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "options",
-                  "default": "{ includeDisabled: true }",
-                  "type": {
-                    "text": "{ includeDisabled: boolean }"
-                  }
-                }
-              ]
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -11752,6 +12578,25 @@
               "name": "syncTabsAndPanels",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "findNextFocusableTab",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "direction",
+                  "type": {
+                    "text": "'forward' | 'backward'"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "updateScrollControls"
@@ -12167,7 +13012,7 @@
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  })"
+              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-blur', 'syn-input'] })"
             },
             {
               "kind": "field",
@@ -13266,7 +14111,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.5.0",
+    "version": "2.7.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"