@synergy-design-system/components 2.4.3 → 2.5.0

package/dist/custom-elements.json

@@ -144,6 +144,82 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynBadge",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The badge's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "syn-badge",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy.style/components/badge\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy.style/components/badge",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynBadge",
+            "module": "components/badge/badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -401,82 +477,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/badge/badge.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynBadge",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The badge's content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "tagNameWithoutPrefix": "badge",
-          "tagName": "syn-badge",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy.style/components/badge\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://synergy.style/components/badge",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynBadge",
-            "module": "components/badge/badge.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/breadcrumb/breadcrumb.js",
@@ -3674,6 +3674,710 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/file/file.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynFile",
+          "cssParts": [
+            {
+              "description": "The form control that wraps the label, input, and help text.",
+              "name": "form-control"
+            },
+            {
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
+            },
+            {
+              "description": "The input's wrapper.",
+              "name": "form-control-input"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The wrapper around the button and text value.",
+              "name": "button-wrapper"
+            },
+            {
+              "description": "The syn-button acting as a file input.",
+              "name": "button"
+            },
+            {
+              "description": "The syn-button's exported `base` part.",
+              "name": "button__base"
+            },
+            {
+              "description": "The chosen files or placeholder text for the file input.",
+              "name": "value"
+            },
+            {
+              "description": "The element wrapping the drop zone.",
+              "name": "droparea"
+            },
+            {
+              "description": "The background of the drop zone.",
+              "name": "droparea-background"
+            },
+            {
+              "description": "The container that wraps the icon for the drop zone.",
+              "name": "droparea-icon"
+            },
+            {
+              "description": "The text for the drop zone.",
+              "name": "droparea-value"
+            },
+            {
+              "description": "The container that wraps the trigger.",
+              "name": "trigger"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The file control's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
+            },
+            {
+              "description": "Optional droparea icon to use instead of the default. Works best with `<syn-icon>`.",
+              "name": "droparea-icon"
+            },
+            {
+              "description": "Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.",
+              "name": "trigger"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{\n    'syn-button': SynButton,\n    'syn-icon': SynIcon,\n  }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, {\n    assumeInteractionOn: ['syn-change'],\n    // This makes sure the value sent in formdata events is always the files object\n    // @see internals/form.ts #handleFormData for more information\n    value: (el: SynFile) => el.files,\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label')"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "userIsDragging",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "files",
+              "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)",
+              "attribute": "files"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the file control, submitted as a name/value pair with form data.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The file control's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The file control's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the file control.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "droparea",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draw the file control as a drop area",
+              "attribute": "droparea"
+            },
+            {
+              "kind": "field",
+              "name": "accept",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Comma separated list of supported file types\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)",
+              "attribute": "accept"
+            },
+            {
+              "kind": "field",
+              "name": "capture",
+              "type": {
+                "text": "'user' | 'environment'"
+              },
+              "description": "Specifies the types of files that the server accepts.\nCan be set either to user or environment.\nWorks only when not using a droparea!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)",
+              "attribute": "capture"
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the user can select more than one file.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)",
+              "attribute": "multiple",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "webkitdirectory",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the file control should let the user select directories instead of files.\nWhen a directory is selected, the directory and its entire hierarchy of contents are included\nin the set of selected items.\nNote: This is a non-standard attribute but is supported in the major browsers.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)",
+              "attribute": "webkitdirectory",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`. The form must be in the same document\nor shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input a required field.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hideValue",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Suppress the value from being displayed in the file control",
+              "attribute": "hide-value"
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "button",
+              "type": {
+                "text": "SynButton"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dropareaWrapper",
+              "type": {
+                "text": "HTMLDivElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dropareaIcon",
+              "type": {
+                "text": "HTMLSpanElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inputChosen",
+              "type": {
+                "text": "HTMLSpanElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the button or droparea."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the button or droparea."
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFiles",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "files",
+                  "type": {
+                    "text": "FileList | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles the change event of the native input"
+            },
+            {
+              "kind": "method",
+              "name": "handleDragOver",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "DragEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDragLeave",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "DragEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDrop",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "DragEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private",
+              "description": "Handle the focus of the droparea and emit focus event"
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "Handle the blur of the droparea and emit blur event"
+            },
+            {
+              "kind": "method",
+              "name": "renderValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderDroparea",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderButton",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when an alteration to the control's value is committed by the user.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
+            },
+            {
+              "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.",
+              "name": "syn-error",
+              "reactName": "onSynError",
+              "eventName": "SynErrorEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "files",
+              "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)",
+              "fieldName": "files"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the file control, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The file control's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The file control's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the file control.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "droparea",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draw the file control as a drop area",
+              "fieldName": "droparea"
+            },
+            {
+              "name": "accept",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Comma separated list of supported file types\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)",
+              "fieldName": "accept"
+            },
+            {
+              "name": "capture",
+              "type": {
+                "text": "'user' | 'environment'"
+              },
+              "description": "Specifies the types of files that the server accepts.\nCan be set either to user or environment.\nWorks only when not using a droparea!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)",
+              "fieldName": "capture"
+            },
+            {
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the user can select more than one file.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)",
+              "fieldName": "multiple"
+            },
+            {
+              "name": "webkitdirectory",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that the file control should let the user select directories instead of files.\nWhen a directory is selected, the directory and its entire hierarchy of contents are included\nin the set of selected items.\nNote: This is a non-standard attribute but is supported in the major browsers.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)",
+              "fieldName": "webkitdirectory"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`. The form must be in the same document\nor shadow root for this to work.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the input a required field.",
+              "fieldName": "required"
+            },
+            {
+              "name": "hide-value",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Suppress the value from being displayed in the file control",
+              "fieldName": "hideValue"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "File controls allow selecting an arbitrary number of files for uploading.",
+          "tagNameWithoutPrefix": "file",
+          "tagName": "syn-file",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary File controls allow selecting an arbitrary number of files for uploading.\n * @status stable\n *\n * @dependency syn-button\n * @dependency syn-icon\n *\n * @slot label - The file control's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the file control.\n *    Alternatively, you can use the `help-text` attribute.\n * @slot droparea-icon - Optional droparea icon to use instead of the default.\n *    Works best with `<syn-icon>`.\n * @slot trigger - Optional content to be used as trigger instead of the default content.\n *    Opening the file dialog on click and as well as drag and drop will work for this content.\n *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,\n *    *hide-value*. Also if using the disabled attribute, the disabled styling will not be\n *    applied and must be taken care of yourself.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-error - Emitted when multiple files are selected via drag and drop, without\n * the `multiple` property being set.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-wrapper - The wrapper around the button and text value.\n * @csspart button - The syn-button acting as a file input.\n * @csspart button__base - The syn-button's exported `base` part.\n * @csspart value - The chosen files or placeholder text for the file input.\n * @csspart droparea - The element wrapping the drop zone.\n * @csspart droparea-background - The background of the drop zone.\n * @csspart droparea-icon - The container that wraps the icon for the drop zone.\n * @csspart droparea-value - The text for the drop zone.\n * @csspart trigger - The container that wraps the trigger.\n *\n * @animation file.iconDrop - The animation to use for the file icon\n * when a file is dropped\n * @animation file.text.disappear - The disappear animation to use for the file placeholder text\n * when a file is dropped\n * @animation file.text.appear - The appear animation to use for the file placeholder text\n * when a file is dropped\n */",
+          "status": "stable",
+          "dependencies": [
+            "syn-button",
+            "syn-icon"
+          ],
+          "animations": [
+            {
+              "name": "file.iconDrop",
+              "description": "The animation to use for the file icon when a file is dropped"
+            },
+            {
+              "name": "file.text.disappear",
+              "description": "The disappear animation to use for the file placeholder text when a file is dropped"
+            },
+            {
+              "name": "file.text.appear",
+              "description": "The appear animation to use for the file placeholder text when a file is dropped"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynFile",
+            "module": "components/file/file.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/header/header.js",
@@ -12562,7 +13266,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.4.3",
+    "version": "2.5.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"