@synergy-design-system/components 3.0.0 → 3.2.0

package/dist/custom-elements.json

@@ -1528,6 +1528,36 @@
               "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": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The button-groups size. This affects all buttons within the group.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'filled' | 'outline'"
+              },
+              "default": "'outline'",
+              "description": "The button-group's theme variant. This affects all buttons within the group.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "mutationObserver",
+              "type": {
+                "text": "MutationObserver"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleFocus",
@@ -1595,6 +1625,24 @@
               "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"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The button-groups size. This affects all buttons within the group.",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'filled' | 'outline'"
+              },
+              "default": "'outline'",
+              "description": "The button-group's theme variant. This affects all buttons within the group.",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
@@ -2257,7 +2305,7 @@
               "name": "form-control-help-text"
             },
             {
-              "description": "The container the wraps the prefix, combobox, clear icon, and expand button.",
+              "description": "The container that wraps the prefix, combobox, clear icon, and expand button.",
               "name": "combobox"
             },
             {
@@ -2295,6 +2343,30 @@
             {
               "description": "The container that wraps the \"no results\" message.",
               "name": "no-results"
+            },
+            {
+              "description": "The container that houses option tags when `multiple` is used.",
+              "name": "tags"
+            },
+            {
+              "description": "The individual tags that represent each selected option in `multiple`.",
+              "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"
             }
           ],
           "slots": [
@@ -2335,7 +2407,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'syn-icon': SynIcon, 'syn-popup': SynPopup, }"
+              "default": "{ 'syn-icon': SynIcon, 'syn-popup': SynPopup, 'syn-tag': SynTag, }"
             },
             {
               "kind": "field",
@@ -2368,16 +2440,17 @@
             },
             {
               "kind": "field",
-              "name": "lastOption",
+              "name": "lastOptions",
               "type": {
-                "text": "SynOption | undefined"
+                "text": "SynOption[]"
               },
               "privacy": "private",
-              "description": "The last syn-option, that was selected by click or via keyboard navigation"
+              "default": "[]",
+              "description": "Cache of the last syn-options that were selected by user interaction (click or keyboard navigation).\nUsed to track user selections and maintain selection state during value changes."
             },
             {
               "kind": "field",
-              "name": "isOptionRendererTriggered",
+              "name": "isInitialized",
               "type": {
                 "text": "boolean"
               },
@@ -2386,12 +2459,29 @@
             },
             {
               "kind": "field",
-              "name": "isInitialized",
+              "name": "isOptionRendererTriggered",
               "type": {
                 "text": "boolean"
               },
               "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Flag to prevent infinite loops when the option renderer programmatically updates options.\nSet to true during option rendering to ignore slot change events triggered by our own updates."
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "mutationObserver",
+              "type": {
+                "text": "MutationObserver"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -2436,6 +2526,13 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "tagContainer",
+              "type": {
+                "text": "HTMLDivElement"
+              }
+            },
             {
               "kind": "field",
               "name": "hasFocus",
@@ -2464,10 +2561,11 @@
             },
             {
               "kind": "field",
-              "name": "selectedOption",
+              "name": "selectedOptions",
               "type": {
-                "text": "SynOption | undefined"
-              }
+                "text": "SynOption[]"
+              },
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -2481,10 +2579,28 @@
               "kind": "field",
               "name": "cachedOptions",
               "type": {
-                "text": "SynOption []"
+                "text": "SynOption[]"
               },
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "valueHasChanged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "hideOptions",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "name",
@@ -2497,22 +2613,27 @@
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "_value",
               "type": {
-                "text": "string"
+                "text": "string | number | Array<string | number>"
               },
-              "default": "''",
-              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-              "attribute": "value"
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "The current value of the combobox, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a list of values  separated by the delimiter, based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain the delimiter character.**"
             },
             {
               "kind": "field",
               "name": "defaultValue",
               "type": {
-                "text": "string"
+                "text": "string | number | Array<string | number>"
               },
               "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "attribute": "value"
             },
             {
               "kind": "field",
@@ -2627,10 +2748,21 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When set to `true`, restricts the combobox to only allow selection from the available options.\nUsers will not be able to enter custom values that are not present in the list.",
+              "description": "When set to `true`, restricts the combobox to only allow selection from the available options.\nUsers will not be able to enter custom values that are not present in the list.\nThis will always be true, if `multiple` is active.",
               "attribute": "restricted",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows more than one option to be selected.\nIf `multiple` is set, the combobox will always be `restricted` to the available options",
+              "attribute": "multiple",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "getOption",
@@ -2665,6 +2797,35 @@
               },
               "attribute": "filter"
             },
+            {
+              "kind": "field",
+              "name": "delimiter",
+              "type": {
+                "text": "string"
+              },
+              "default": "' '",
+              "description": "The delimiter to use when setting the value when `multiple` is enabled.\nThe default is a space ' ', but you can set it to a comma or other character(s).",
+              "attribute": "delimiter"
+            },
+            {
+              "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": "getTag",
+              "type": {
+                "text": "(option: SynOption, index: number) => TemplateResult | string | HTMLElement"
+              },
+              "description": "A function that customizes the tags to be rendered when `multiple` is 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",
@@ -2677,6 +2838,22 @@
               "description": "Gets the validation message",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "calculateTagMaxWidth",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableResizeObserver",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "tags",
+              "privacy": "protected",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "addOpenListeners",
@@ -2717,6 +2894,25 @@
               "name": "handleLabelClick",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "handleTagRemove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "SynRemoveEvent"
+                  }
+                },
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "handleComboboxMouseDown",
@@ -2756,6 +2952,11 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "clearInputField",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "clearCombobox",
@@ -2804,45 +3005,65 @@
             },
             {
               "kind": "method",
-              "name": "getAllFilteredOptions",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentOption",
-              "privacy": "private"
+              "name": "toggleOptionSelection",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption"
+                  }
+                },
+                {
+                  "name": "force",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "setCurrentOption",
+              "name": "setSelectedOptions",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "option",
                   "type": {
-                    "text": "SynOption | null"
+                    "text": "SynOption | SynOption[]"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "updateSelectedOptionsCacheAndValue",
+              "name": "getAllFilteredOptions",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentOption",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setCurrentOption",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "option",
                   "type": {
-                    "text": "SynOption | undefined"
+                    "text": "SynOption | null"
                   }
                 }
-              ],
-              "description": "Updates the selected options cache, the current value, and the display value"
+              ]
             },
             {
               "kind": "method",
-              "name": "setSelectedOptionToSelected",
-              "privacy": "private"
+              "name": "selectionChanged",
+              "privacy": "private",
+              "description": "Updates the component state after selection changes.\n\nThis method synchronizes:\n1. The selectedOptions cache with currently selected options\n2. The component's value property (string or array)\n3. The display label shown in the input\n4. Form validation state\n\n**Validation Logic:**\n- In restricted mode, invalid values trigger a reset to last valid state\n- Multiple mode requires all values to correspond to existing options\n- Single mode allows free text input when not restricted"
             },
             {
               "kind": "method",
@@ -2861,10 +3082,18 @@
               "kind": "method",
               "name": "handlePropertiesChange"
             },
+            {
+              "kind": "method",
+              "name": "handleDisplayInputValueChange"
+            },
             {
               "kind": "method",
               "name": "handleDisabledChange"
             },
+            {
+              "kind": "method",
+              "name": "handleDelimiterChange"
+            },
             {
               "kind": "method",
               "name": "handleValueChange"
@@ -2944,9 +3173,11 @@
                   "name": "queryString",
                   "type": {
                     "text": "string"
-                  }
+                  },
+                  "description": "The current user input to filter and highlight options with"
                 }
-              ]
+              ],
+              "description": "Updates the visibility and rendering of options based on the current query string.\n\nThis method performs several critical tasks:\n1. **Option Filtering**: Uses the `filter` function to determine which options should be visible\n2. **Custom Rendering**: Applies the `getOption` function to customize option appearance\n3. **Optgroup Management**: Shows/hides optgroups based on their visible children\n4. **Counts visible options**: Tracks the number of visible options for UI logic\n\n**Performance Considerations:**\n- Uses cached options to avoid repeated DOM queries\n- Prevents infinite loops during option updates with `isOptionRendererTriggered`"
             },
             {
               "kind": "method",
@@ -2962,15 +3193,24 @@
                   "text": ""
                 }
               },
-              "description": "Checks if the current value is available in the options list.\nThis is used to determine if the value is valid when the combobox is restricted."
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string | number"
+                  },
+                  "description": "The value to check for validity."
+                }
+              ],
+              "description": "Checks if the value is available in the options list.\nThis is used to determine if the value is valid when the combobox is restricted."
             },
             {
               "kind": "method",
-              "name": "getOptionFromValue",
+              "name": "getOptionsFromValue",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "SynOption | undefined"
+                  "text": "SynOption[]"
                 }
               }
             },
@@ -3015,6 +3255,12 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "handleSlotContentChange",
+              "privacy": "private",
+              "description": "Synchronizes the internal component state with changes to slotted options.\n\nThis method is automatically triggered by:\n- MutationObserver when option 'value' attributes change\n- Initial component setup during connectedCallback (after timeout)\n- Default slot changes (via handleDefaultSlotChange)\n- Custom element registration completion for syn-option (deferred execution)\n\nThe synchronization process:\n1. Waits for syn-option custom elements to be registered before processing\n2. Updates delimiter settings on all slotted options\n3. Refreshes the internal cache of options and optgroups\n4. Synchronizes selected options based on current component value\n5. Auto-opens listbox if component has focus, has value, and is currently closed\n\nThis ensures the component's internal state stays consistent with the slotted\nDOM content after options are added, removed, or their values change."
+            },
             {
               "kind": "method",
               "name": "handleDefaultSlotChange",
@@ -3099,15 +3345,6 @@
               "description": "The name of the combobox, submitted as a name/value pair with form data.",
               "fieldName": "name"
             },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-              "fieldName": "value"
-            },
             {
               "name": "size",
               "type": {
@@ -3204,9 +3441,18 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When set to `true`, restricts the combobox to only allow selection from the available options.\nUsers will not be able to enter custom values that are not present in the list.",
+              "description": "When set to `true`, restricts the combobox to only allow selection from the available options.\nUsers will not be able to enter custom values that are not present in the list.\nThis will always be true, if `multiple` is active.",
               "fieldName": "restricted"
             },
+            {
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows more than one option to be selected.\nIf `multiple` is set, the combobox will always be `restricted` to the available options",
+              "fieldName": "multiple"
+            },
             {
               "name": "getOption",
               "type": {
@@ -3238,22 +3484,58 @@
                 }
               },
               "fieldName": "filter"
+            },
+            {
+              "name": "delimiter",
+              "type": {
+                "text": "string"
+              },
+              "default": "' '",
+              "description": "The delimiter to use when setting the value when `multiple` is enabled.\nThe default is a space ' ', but you can set it to a comma or other character(s).",
+              "fieldName": "delimiter"
+            },
+            {
+              "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": "getTag",
+              "type": {
+                "text": "(option: SynOption, index: number) => TemplateResult | string | HTMLElement"
+              },
+              "description": "A function that customizes the tags to be rendered when `multiple` is 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"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | number | Array<string | number>"
+              },
+              "default": "''",
+              "description": "The current value of the combobox, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a list of values  separated by the delimiter, based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain the delimiter character.**",
+              "fieldName": "value"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Comboboxes allow you to choose items from a menu of predefined options.",
+          "summary": "A combobox component that combines the functionality of a text input with a dropdown listbox,\nallowing users to either select from predefined options or enter custom values (when not restricted).",
           "tagNameWithoutPrefix": "combobox",
           "tagName": "syn-combobox",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Comboboxes allow you to choose items from a menu of predefined options.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs\n * @status stable\n *\n * @dependency syn-icon\n * @dependency syn-popup\n *\n * @slot - The listbox options. Must be `<syn-option>` elements.\n *    You can use `<syn-optgroup>`'s to group items visually.\n * @slot label - The combobox'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.\n *    Rotates on open and close.\n * @slot help-text - Text that describes how to use the combobox.\n *    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 combobox's menu opens.\n * @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the combobox's menu closes.\n * @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n *    and its constraints aren't satisfied.\n * @event syn-error - Emitted when the combobox menu fails to open.\n *\n * @csspart form-control - The form control that wraps the label, combobox, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The combobox'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 suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label,\n *     an `<input>` element.\n * @csspart listbox - The listbox container where the options are slotted\n *   and the filtered options list exists.\n * @csspart filtered-listbox - The container that wraps the filtered options.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n * @csspart popup - The popup's exported `popup` part.\n * Use this to target the tooltip's popup container.\n * @csspart no-results - The container that wraps the \"no results\" message.\n *\n * @animation combobox.show - The animation to use when showing the combobox.\n * @animation combobox.hide - The animation to use when hiding the combobox.\n */",
+          "jsDoc": "/**\n * @summary A combobox component that combines the functionality of a text input with a dropdown listbox,\n * allowing users to either select from predefined options or enter custom values (when not restricted).\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs\n * @status stable\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-tag\n *\n * @slot - The listbox options. Must be `<syn-option>` elements.\n *    You can use `<syn-optgroup>`'s to group items visually.\n * @slot label - The combobox'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.\n *    Rotates on open and close.\n * @slot help-text - Text that describes how to use the combobox.\n *    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 combobox's menu opens.\n * @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the combobox's menu closes.\n * @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n *    and its constraints aren't satisfied.\n * @event syn-error - Emitted when the combobox menu fails to open.\n *\n * @csspart form-control - The form control that wraps the label, combobox, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The combobox's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container that wraps the prefix, 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,\n *     an `<input>` element.\n * @csspart listbox - The listbox container where the options are slotted\n *   and the filtered options list exists.\n * @csspart filtered-listbox - The container that wraps the filtered options.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n * @csspart popup - The popup's exported `popup` part.\n * Use this to target the tooltip's popup container.\n * @csspart no-results - The container that wraps the \"no results\" message.\n * @csspart tags - The container that houses option tags when `multiple` is used.\n * @csspart tag - The individual tags that represent each selected option in `multiple`.\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 *\n * @animation combobox.show - The animation to use when showing the combobox.\n * @animation combobox.hide - The animation to use when hiding the combobox.\n */",
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs",
           "status": "stable",
           "dependencies": [
             "syn-icon",
-            "syn-popup"
+            "syn-popup",
+            "syn-tag"
           ],
           "animations": [
             {
@@ -16244,7 +16526,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "3.0.0",
+    "version": "3.2.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/events/syn-after-hide.d.ts

@@ -1,9 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
 /**
  * Synergy custom event
  */

package/dist/events/syn-after-show.d.ts

@@ -1,9 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
 /**
  * Synergy custom event
  */