@synergy-design-system/vue 2.4.3 → 2.6.0

package/dist/components/SynVueFile.vue.d.ts

@@ -0,0 +1,215 @@
+import '@synergy-design-system/components/components/file/file.js';
+import type { SynBlurEvent, SynChangeEvent, SynErrorEvent, SynFile, SynFocusEvent, SynInputEvent } from '@synergy-design-system/components';
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynErrorEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * The selected files as a FileList object containing a list of File objects.
+  The FileList behaves like an array, so you can get the number of selected files
+  via its length property.
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)
+   */
+    files?: FileList | null | undefined;
+    /**
+  * The name of the file control, submitted as a name/value pair with form data.
+   */
+    name?: string | undefined;
+    /**
+  * The value of the file control contains a string that represents the path of the selected file.
+  If multiple files are selected, the value represents the first file in the list.
+  If no file is selected, the value is an empty string.
+  Beware that the only valid value when setting a file control is an empty string!
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)
+   */
+    value?: string | undefined;
+    /**
+  * The file control's size.
+   */
+    size?: "medium" | "large" | "small" | undefined;
+    /**
+  * The file control's label.
+  * If you need to display HTML, use the `label` slot instead.
+   */
+    label?: string | undefined;
+    /**
+  * The file control's help text.
+  If you need to display HTML, use the `help-text` slot instead.
+   */
+    helpText?: string | undefined;
+    /**
+  * Disables the file control.
+   */
+    disabled?: boolean | undefined;
+    /**
+  * Draw the file control as a drop area
+   */
+    droparea?: boolean | undefined;
+    /**
+  * Comma separated list of supported file types
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
+   */
+    accept?: string | undefined;
+    /**
+  * Specifies the types of files that the server accepts.
+  Can be set either to user or environment.
+  Works only when not using a droparea!
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+   */
+    capture?: "user" | "environment" | undefined;
+    /**
+  * Indicates whether the user can select more than one file.
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
+   */
+    multiple?: boolean | undefined;
+    /**
+  * Indicates that the file control should let the user select directories instead of files.
+  When a directory is selected, the directory and its entire hierarchy of contents are included
+  in the set of selected items.
+  Note: This is a non-standard attribute but is supported in the major browsers.
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+   */
+    webkitdirectory?: boolean | undefined;
+    /**
+  * By default, form controls are associated with the nearest containing `<form>` element.
+  This attribute allows you to place the form control outside of a form and associate it
+  with the form that has this `id`.
+  * The form must be in the same document
+  or shadow root for this to work.
+   */
+    form?: string | undefined;
+    /**
+  * Makes the input a required field.
+   */
+    required?: boolean | undefined;
+    /**
+  * Suppress the value from being displayed in the file control
+   */
+    hideValue?: boolean | undefined;
+    /**
+  * Support for two way data binding
+   */
+    modelValue?: FileList | null | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynFile | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "syn-blur": (e: SynBlurEvent) => void;
+    "syn-focus": (e: SynFocusEvent) => void;
+    "syn-change": (e: SynChangeEvent) => void;
+    "syn-input": (e: SynInputEvent) => void;
+    "update:modelValue": (newValue: FileList | null) => void;
+    "syn-error": (e: SynErrorEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * The selected files as a FileList object containing a list of File objects.
+  The FileList behaves like an array, so you can get the number of selected files
+  via its length property.
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)
+   */
+    files?: FileList | null | undefined;
+    /**
+  * The name of the file control, submitted as a name/value pair with form data.
+   */
+    name?: string | undefined;
+    /**
+  * The value of the file control contains a string that represents the path of the selected file.
+  If multiple files are selected, the value represents the first file in the list.
+  If no file is selected, the value is an empty string.
+  Beware that the only valid value when setting a file control is an empty string!
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)
+   */
+    value?: string | undefined;
+    /**
+  * The file control's size.
+   */
+    size?: "medium" | "large" | "small" | undefined;
+    /**
+  * The file control's label.
+  * If you need to display HTML, use the `label` slot instead.
+   */
+    label?: string | undefined;
+    /**
+  * The file control's help text.
+  If you need to display HTML, use the `help-text` slot instead.
+   */
+    helpText?: string | undefined;
+    /**
+  * Disables the file control.
+   */
+    disabled?: boolean | undefined;
+    /**
+  * Draw the file control as a drop area
+   */
+    droparea?: boolean | undefined;
+    /**
+  * Comma separated list of supported file types
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
+   */
+    accept?: string | undefined;
+    /**
+  * Specifies the types of files that the server accepts.
+  Can be set either to user or environment.
+  Works only when not using a droparea!
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+   */
+    capture?: "user" | "environment" | undefined;
+    /**
+  * Indicates whether the user can select more than one file.
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
+   */
+    multiple?: boolean | undefined;
+    /**
+  * Indicates that the file control should let the user select directories instead of files.
+  When a directory is selected, the directory and its entire hierarchy of contents are included
+  in the set of selected items.
+  Note: This is a non-standard attribute but is supported in the major browsers.
+  [see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+   */
+    webkitdirectory?: boolean | undefined;
+    /**
+  * By default, form controls are associated with the nearest containing `<form>` element.
+  This attribute allows you to place the form control outside of a form and associate it
+  with the form that has this `id`.
+  * The form must be in the same document
+  or shadow root for this to work.
+   */
+    form?: string | undefined;
+    /**
+  * Makes the input a required field.
+   */
+    required?: boolean | undefined;
+    /**
+  * Suppress the value from being displayed in the file control
+   */
+    hideValue?: boolean | undefined;
+    /**
+  * Support for two way data binding
+   */
+    modelValue?: FileList | null | undefined;
+}>>> & {
+    "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
+    "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
+    "onSyn-change"?: ((e: SynChangeEvent) => any) | undefined;
+    "onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((newValue: FileList | null) => any) | undefined;
+    "onSyn-error"?: ((e: SynErrorEvent) => any) | undefined;
+}, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/SynVueIcon.vue.d.ts

@@ -27,8 +27,8 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
 }>, {
     nativeElement: import("vue").Ref<SynIcon | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "syn-load": (e: SynLoadEvent) => void;
     "syn-error": (e: SynErrorEvent) => void;
+    "syn-load": (e: SynLoadEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * The name of the icon to draw.
@@ -52,8 +52,8 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
    */
     library?: string | undefined;
 }>>> & {
-    "onSyn-load"?: ((e: SynLoadEvent) => any) | undefined;
     "onSyn-error"?: ((e: SynErrorEvent) => any) | undefined;
+    "onSyn-load"?: ((e: SynLoadEvent) => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/SynVueRange.vue.d.ts

@@ -0,0 +1,154 @@
+import '@synergy-design-system/components/components/range/range.js';
+import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynMoveEvent, SynRange } from '@synergy-design-system/components';
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';
+export type { SynMoveEvent } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * The name of the range, submitted as a name/value pair with form data.
+   */
+    name?: string | undefined;
+    /**
+  * The range's label.
+  * If you need to display HTML, use the `label` slot instead.
+   */
+    label?: string | undefined;
+    /**
+  * The range's help text.
+  * If you need to display HTML, use the help-text slot instead.
+   */
+    helpText?: string | undefined;
+    /**
+  * Disables the range.
+   */
+    disabled?: boolean | undefined;
+    /**
+  * The minimum acceptable value of the range.
+   */
+    min?: number | undefined;
+    /**
+  * The maximum acceptable value of the range.
+   */
+    max?: number | undefined;
+    /**
+  * The interval at which the range will increase and decrease.
+   */
+    step?: number | undefined;
+    /**
+  * The range's size.
+   */
+    size?: "medium" | "large" | "small" | undefined;
+    /**
+  * The preferred placement of the range's tooltip.
+  * Use "none" to disable the tooltip
+   */
+    tooltipPlacement?: "top" | "bottom" | "none" | undefined;
+    /**
+  * The current values of the input (in ascending order) as a string of space separated values
+   */
+    value?: string | null | undefined;
+    /**
+  * By default, form controls are associated with the nearest containing `<form>` element.
+  This attribute allows you to place the form control outside of a form
+  and associate it with the form that has this `id`.
+  The form must be in the same document or shadow root for this to work.
+   */
+    form?: string | undefined;
+    /**
+  * Support for two way data binding
+   */
+    modelValue?: string | null | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynRange | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "syn-blur": (e: SynBlurEvent) => void;
+    "syn-focus": (e: SynFocusEvent) => void;
+    "syn-invalid": (e: SynInvalidEvent) => void;
+    "syn-change": (e: SynChangeEvent) => void;
+    "syn-input": (e: SynInputEvent) => void;
+    "update:modelValue": (newValue: string | null) => void;
+    "syn-move": (e: SynMoveEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * The name of the range, submitted as a name/value pair with form data.
+   */
+    name?: string | undefined;
+    /**
+  * The range's label.
+  * If you need to display HTML, use the `label` slot instead.
+   */
+    label?: string | undefined;
+    /**
+  * The range's help text.
+  * If you need to display HTML, use the help-text slot instead.
+   */
+    helpText?: string | undefined;
+    /**
+  * Disables the range.
+   */
+    disabled?: boolean | undefined;
+    /**
+  * The minimum acceptable value of the range.
+   */
+    min?: number | undefined;
+    /**
+  * The maximum acceptable value of the range.
+   */
+    max?: number | undefined;
+    /**
+  * The interval at which the range will increase and decrease.
+   */
+    step?: number | undefined;
+    /**
+  * The range's size.
+   */
+    size?: "medium" | "large" | "small" | undefined;
+    /**
+  * The preferred placement of the range's tooltip.
+  * Use "none" to disable the tooltip
+   */
+    tooltipPlacement?: "top" | "bottom" | "none" | undefined;
+    /**
+  * The current values of the input (in ascending order) as a string of space separated values
+   */
+    value?: string | null | undefined;
+    /**
+  * By default, form controls are associated with the nearest containing `<form>` element.
+  This attribute allows you to place the form control outside of a form
+  and associate it with the form that has this `id`.
+  The form must be in the same document or shadow root for this to work.
+   */
+    form?: string | undefined;
+    /**
+  * Support for two way data binding
+   */
+    modelValue?: string | null | undefined;
+}>>> & {
+    "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
+    "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
+    "onSyn-invalid"?: ((e: SynInvalidEvent) => any) | undefined;
+    "onSyn-change"?: ((e: SynChangeEvent) => any) | undefined;
+    "onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((newValue: string | null) => any) | undefined;
+    "onSyn-move"?: ((e: SynMoveEvent) => any) | undefined;
+}, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/SynVueRangeTick.vue.d.ts

@@ -0,0 +1,32 @@
+import '@synergy-design-system/components/components/range-tick/range-tick.js';
+import type { SynRangeTick } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * Whether the tick should be shown as a subdivision.
+   */
+    subdivision?: boolean | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynRangeTick | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * Whether the tick should be shown as a subdivision.
+   */
+    subdivision?: boolean | undefined;
+}>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { default as SynVueDialog } from "./components/SynVueDialog.vue";
 export { default as SynVueDivider } from "./components/SynVueDivider.vue";
 export { default as SynVueDrawer } from "./components/SynVueDrawer.vue";
 export { default as SynVueDropdown } from "./components/SynVueDropdown.vue";
+export { default as SynVueFile } from "./components/SynVueFile.vue";
 export { default as SynVueHeader } from "./components/SynVueHeader.vue";
 export { default as SynVueIcon } from "./components/SynVueIcon.vue";
 export { default as SynVueIconButton } from "./components/SynVueIconButton.vue";
@@ -29,6 +30,8 @@ export { default as SynVueProgressRing } from "./components/SynVueProgressRing.v
 export { default as SynVueRadio } from "./components/SynVueRadio.vue";
 export { default as SynVueRadioButton } from "./components/SynVueRadioButton.vue";
 export { default as SynVueRadioGroup } from "./components/SynVueRadioGroup.vue";
+export { default as SynVueRange } from "./components/SynVueRange.vue";
+export { default as SynVueRangeTick } from "./components/SynVueRangeTick.vue";
 export { default as SynVueSelect } from "./components/SynVueSelect.vue";
 export { default as SynVueSideNav } from "./components/SynVueSideNav.vue";
 export { default as SynVueSpinner } from "./components/SynVueSpinner.vue";

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@synergy-design-system/components": "^2.4.3"
+    "@synergy-design-system/components": "^2.6.0"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,12 +40,12 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "2.4.3",
+  "version": "2.6.0",
   "devDependencies": {
     "@vue/tsconfig": "^0.5.1",
     "vue": "^3.4.24"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.5.0"
+    "@synergy-design-system/tokens": "^2.7.0"
   }
 }

package/src/components/SynVueFile.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @summary File controls allow selecting an arbitrary number of files for uploading.
+ * @status stable
+ *
+ * @dependency syn-button
+ * @dependency syn-icon
+ *
+ * @slot label - The file control's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the file control.
+ *    Alternatively, you can use the `help-text` attribute.
+ * @slot droparea-icon - Optional droparea icon to use instead of the default.
+ *    Works best with `<syn-icon>`.
+ * @slot trigger - 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.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-error - Emitted when multiple files are selected via drag and drop, without
+ * the `multiple` property being set.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart button-wrapper - The wrapper around the button and text value.
+ * @csspart button - The syn-button acting as a file input.
+ * @csspart button__base - The syn-button's exported `base` part.
+ * @csspart value - The chosen files or placeholder text for the file input.
+ * @csspart droparea - The element wrapping the drop zone.
+ * @csspart droparea-background - The background of the drop zone.
+ * @csspart droparea-icon - The container that wraps the icon for the drop zone.
+ * @csspart droparea-value - The text for the drop zone.
+ * @csspart trigger - The container that wraps the trigger.
+ *
+ * @animation file.iconDrop - The animation to use for the file icon
+ * when a file is dropped
+ * @animation file.text.disappear - The disappear animation to use for the file placeholder text
+ * when a file is dropped
+ * @animation file.text.appear - The appear animation to use for the file placeholder text
+ * when a file is dropped
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/file/file.js';
+
+import type {
+  SynBlurEvent, SynChangeEvent, SynErrorEvent, SynFile, SynFocusEvent, SynInputEvent,
+} from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynFile>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The selected files as a FileList object containing a list of File objects.
+The FileList behaves like an array, so you can get the number of selected files
+via its length property.
+[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)
+ */
+  'files'?: SynFile['files'];
+
+  /**
+* The name of the file control, submitted as a name/value pair with form data.
+ */
+  'name'?: SynFile['name'];
+
+  /**
+* The value of the file control contains a string that represents the path of the selected file.
+If multiple files are selected, the value represents the first file in the list.
+If no file is selected, the value is an empty string.
+Beware that the only valid value when setting a file control is an empty string!
+[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)
+ */
+  'value'?: SynFile['value'];
+
+  /**
+* The file control's size.
+ */
+  'size'?: SynFile['size'];
+
+  /**
+* The file control's label.
+* If you need to display HTML, use the `label` slot instead.
+ */
+  'label'?: SynFile['label'];
+
+  /**
+* The file control's help text.
+If you need to display HTML, use the `help-text` slot instead.
+ */
+  'helpText'?: SynFile['helpText'];
+
+  /**
+* Disables the file control.
+ */
+  'disabled'?: SynFile['disabled'];
+
+  /**
+* Draw the file control as a drop area
+ */
+  'droparea'?: SynFile['droparea'];
+
+  /**
+* Comma separated list of supported file types
+[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
+ */
+  'accept'?: SynFile['accept'];
+
+  /**
+* Specifies the types of files that the server accepts.
+Can be set either to user or environment.
+Works only when not using a droparea!
+[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+ */
+  'capture'?: SynFile['capture'];
+
+  /**
+* Indicates whether the user can select more than one file.
+[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
+ */
+  'multiple'?: SynFile['multiple'];
+
+  /**
+* Indicates that the file control should let the user select directories instead of files.
+When a directory is selected, the directory and its entire hierarchy of contents are included
+in the set of selected items.
+Note: This is a non-standard attribute but is supported in the major browsers.
+[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+ */
+  'webkitdirectory'?: SynFile['webkitdirectory'];
+
+  /**
+* By default, form controls are associated with the nearest containing `<form>` element.
+This attribute allows you to place the form control outside of a form and associate it
+with the form that has this `id`.
+* The form must be in the same document
+or shadow root for this to work.
+ */
+  'form'?: SynFile['form'];
+
+  /**
+* Makes the input a required field.
+ */
+  'required'?: SynFile['required'];
+
+  /**
+* Suppress the value from being displayed in the file control
+ */
+  'hideValue'?: SynFile['hideValue'];
+
+  /**
+* Support for two way data binding
+ */
+  modelValue?: SynFile['files'];
+}>();
+
+// Make sure prop binding only forwards the props that are actually there.
+// This is needed because :param="param" also adds an empty attribute
+// when using web-components, which breaks optional arguments like size in SynInput
+// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
+const visibleProps = computed(() => Object.fromEntries(
+  Object
+    .entries(props)
+    .filter(([, value]) => typeof value !== 'undefined'),
+));
+
+// Map events
+defineEmits<{
+  /**
+* Emitted when the control loses focus.
+ */
+  'syn-blur': [e: SynBlurEvent];
+
+  /**
+* Emitted when an alteration to the control's value is committed by the user.
+ */
+  'syn-change': [e: SynChangeEvent];
+
+  /**
+* Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.
+ */
+  'syn-error': [e: SynErrorEvent];
+
+  /**
+* Emitted when the control gains focus.
+ */
+  'syn-focus': [e: SynFocusEvent];
+
+  /**
+* Emitted when the control receives input.
+ */
+  'syn-input': [e: SynInputEvent];
+
+  /**
+* Support for two way data binding
+ */
+  'update:modelValue': [newValue: SynFile['files']];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynErrorEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-file
+    v-bind="visibleProps"
+    ref="nativeElement"
+    :files="typeof props.modelValue !== 'undefined' ? props.modelValue : typeof props.files !== 'undefined' ? props.files : undefined"
+    @syn-blur="$emit('syn-blur', $event)"
+    @syn-change="$emit('syn-change', $event)"
+    @syn-error="$emit('syn-error', $event)"
+    @syn-focus="$emit('syn-focus', $event)"
+    @syn-input="$emit('update:modelValue', $event.target.files); $emit('syn-input', $event)"
+  >
+    <slot />
+  </syn-file>
+</template>

package/src/components/SynVueRange.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @summary Ranges allow the user to select values within a given range using one or two thumbs.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @status stable
+ *
+ * @dependency syn-tooltip
+ *
+ * @slot label - The range's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the range.
+ * @slot suffix - Used to append a presentational icon or similar element to the range.
+ * @slot help-text - Text that describes how to use the range.
+ * Alternatively, you can use the `help-text` attribute.
+ * @slot ticks - Used to display tick marks at specific intervals along the range.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity
+ * and its constraints aren't satisfied.
+ * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
+ * Use `Event.preventDefault()` to prevent movement.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the input track and ticks.
+ * @csspart track-wrapper - The wrapper for the track.
+ * @csspart track - The inactive track.
+ * @csspart active-track - The active track.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart ticks - The container that wraps the tick marks.
+ * @csspart thumb - The thumb(s) that the user can drag to change the range.
+ *
+ * @cssproperty --thumb-size - The size of a thumb.
+ * @cssproperty --thumb-hit-area-size - 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).
+ * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
+ * @cssproperty --track-color-active - Color of the track representing the current value.
+ * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
+ * @cssproperty --track-height - The height of the track.
+ * @cssproperty --track-active-offset - The point of origin of the active track,
+ * starting at the left side of the range.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/range/range.js';
+
+import type {
+  SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynMoveEvent, SynRange,
+} from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynRange>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The name of the range, submitted as a name/value pair with form data.
+ */
+  'name'?: SynRange['name'];
+
+  /**
+* The range's label.
+* If you need to display HTML, use the `label` slot instead.
+ */
+  'label'?: SynRange['label'];
+
+  /**
+* The range's help text.
+* If you need to display HTML, use the help-text slot instead.
+ */
+  'helpText'?: SynRange['helpText'];
+
+  /**
+* Disables the range.
+ */
+  'disabled'?: SynRange['disabled'];
+
+  /**
+* The minimum acceptable value of the range.
+ */
+  'min'?: SynRange['min'];
+
+  /**
+* The maximum acceptable value of the range.
+ */
+  'max'?: SynRange['max'];
+
+  /**
+* The interval at which the range will increase and decrease.
+ */
+  'step'?: SynRange['step'];
+
+  /**
+* The range's size.
+ */
+  'size'?: SynRange['size'];
+
+  /**
+* The preferred placement of the range's tooltip.
+* Use "none" to disable the tooltip
+ */
+  'tooltipPlacement'?: SynRange['tooltipPlacement'];
+
+  /**
+* The current values of the input (in ascending order) as a string of space separated values
+ */
+  'value'?: SynRange['value'];
+
+  /**
+* By default, form controls are associated with the nearest containing `<form>` element.
+This attribute allows you to place the form control outside of a form
+and associate it with the form that has this `id`.
+The form must be in the same document or shadow root for this to work.
+ */
+  'form'?: SynRange['form'];
+
+  /**
+* Support for two way data binding
+ */
+  modelValue?: SynRange['value'];
+}>();
+
+// Make sure prop binding only forwards the props that are actually there.
+// This is needed because :param="param" also adds an empty attribute
+// when using web-components, which breaks optional arguments like size in SynInput
+// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
+const visibleProps = computed(() => Object.fromEntries(
+  Object
+    .entries(props)
+    .filter(([, value]) => typeof value !== 'undefined'),
+));
+
+// Map events
+defineEmits<{
+  /**
+* Emitted when the control loses focus.
+ */
+  'syn-blur': [e: SynBlurEvent];
+
+  /**
+* Emitted when an alteration to the control's value is committed by the user.
+ */
+  'syn-change': [e: SynChangeEvent];
+
+  /**
+* Emitted when the control gains focus.
+ */
+  'syn-focus': [e: SynFocusEvent];
+
+  /**
+* Emitted when the control receives input.
+ */
+  'syn-input': [e: SynInputEvent];
+
+  /**
+* Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ */
+  'syn-invalid': [e: SynInvalidEvent];
+
+  /**
+* Emitted when the user moves a thumb, either via touch or keyboard.
+* Use `Event.preventDefault()` to prevent movement.
+ */
+  'syn-move': [e: SynMoveEvent];
+
+  /**
+* Support for two way data binding
+ */
+  'update:modelValue': [newValue: SynRange['value']];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';
+export type { SynMoveEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-range
+    v-bind="visibleProps"
+    ref="nativeElement"
+    :value="typeof props.modelValue !== 'undefined' ? props.modelValue : typeof props.value !== 'undefined' ? props.value : undefined"
+    @syn-blur="$emit('syn-blur', $event)"
+    @syn-change="$emit('syn-change', $event)"
+    @syn-focus="$emit('syn-focus', $event)"
+    @syn-input="$emit('update:modelValue', $event.target.value); $emit('syn-input', $event)"
+    @syn-invalid="$emit('syn-invalid', $event)"
+    @syn-move="$emit('syn-move', $event)"
+  >
+    <slot />
+  </syn-range>
+</template>

package/src/components/SynVueRangeTick.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @summary Ticks visually improve positioning on range sliders.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @status stable
+ *
+ * @slot - The tick's label
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The component's label.
+ * @csspart line - The component's tick line.
+ *
+ * @cssproperty --tick-height - The height of the tick marker.
+ * @cssproperty --tick-label-top - The top offset of the tick label.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/range-tick/range-tick.js';
+
+import type { SynRangeTick } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynRangeTick>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Whether the tick should be shown as a subdivision.
+ */
+  'subdivision'?: SynRangeTick['subdivision'];
+}>();
+
+// Make sure prop binding only forwards the props that are actually there.
+// This is needed because :param="param" also adds an empty attribute
+// when using web-components, which breaks optional arguments like size in SynInput
+// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
+const visibleProps = computed(() => Object.fromEntries(
+  Object
+    .entries(props)
+    .filter(([, value]) => typeof value !== 'undefined'),
+));
+
+</script>
+
+<template>
+  <syn-range-tick
+
+    v-bind="visibleProps"
+    ref="nativeElement"
+  >
+    <slot />
+  </syn-range-tick>
+</template>

package/src/index.js

@@ -17,6 +17,7 @@ export { default as SynVueDialog } from './components/SynVueDialog.vue';
 export { default as SynVueDivider } from './components/SynVueDivider.vue';
 export { default as SynVueDrawer } from './components/SynVueDrawer.vue';
 export { default as SynVueDropdown } from './components/SynVueDropdown.vue';
+export { default as SynVueFile } from './components/SynVueFile.vue';
 export { default as SynVueHeader } from './components/SynVueHeader.vue';
 export { default as SynVueIcon } from './components/SynVueIcon.vue';
 export { default as SynVueIconButton } from './components/SynVueIconButton.vue';
@@ -34,6 +35,8 @@ export { default as SynVueProgressRing } from './components/SynVueProgressRing.v
 export { default as SynVueRadio } from './components/SynVueRadio.vue';
 export { default as SynVueRadioButton } from './components/SynVueRadioButton.vue';
 export { default as SynVueRadioGroup } from './components/SynVueRadioGroup.vue';
+export { default as SynVueRange } from './components/SynVueRange.vue';
+export { default as SynVueRangeTick } from './components/SynVueRangeTick.vue';
 export { default as SynVueSelect } from './components/SynVueSelect.vue';
 export { default as SynVueSideNav } from './components/SynVueSideNav.vue';
 export { default as SynVueSpinner } from './components/SynVueSpinner.vue';