@synergy-design-system/vue 1.23.1 → 1.24.0

package/README.md

@@ -139,7 +139,10 @@ An example for how these types can be used in case of event handling, is shown b
 </template>
 ```
 
-### 7. Usage of methods
+### 7.1. Usage of methods (DEPRECATED)
+
+> ⛔️ This feature is deprecated, the methods defined below will not be available in the next major version of `@synergy-design-system/vue`!
+> If you need to call methods on elements, please obtain a reference to the native element as shown below and call the method on the native element itself!
 
 Components can have methods (like `focus`, `click`, `stepUp`, etc. ), which trigger an action, if they are called.
 
@@ -168,6 +171,29 @@ An example for calling such a method in a Vue component is shown here:
 </template>
 ```
 
+### 7.2. Obtaining a reference to the underlying native element
+
+Sometimes, there is a need to interact directly with the underlying native web-component. For this reason, the library exposes a `nativeElement` property for all vue components.
+
+```html
+<script setup lang="ts">
+  import { SynVueInput, SynVueButton } from "@synergy-design-system/vue";
+  import { ref } from "vue";
+
+  const count = ref<InstanceType<typeof SynVueInput> | null>(null);
+
+  const handleClick = () => {
+    // Increment the count via calling the method
+    count.value?.nativeElement?.stepUp();
+  };
+</script>
+
+<template>
+  <SynVueInput ref="count" label="My count" type="number" value="5" />
+  <SynVueButton @click="handleClick"> Increment </SynVueButton>
+</template>
+```
+
 ### 8. Using two way databinding
 
 We support [Vue two way data binding](https://vuejs.org/guide/components/v-model.html) for form components out of the box.

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/alert/alert.js';
-import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynAlert, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
 export type { SynShowEvent } from '@synergy-design-system/components';
 export type { SynAfterShowEvent } from '@synergy-design-system/components';
 export type { SynHideEvent } from '@synergy-design-system/components';
@@ -34,6 +34,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callShow: () => Promise<void> | undefined;
     callHide: () => Promise<void> | undefined;
     callToast: () => Promise<void> | undefined;
+    nativeElement: import("vue").Ref<SynAlert | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-show": (e: SynShowEvent) => void;
     "syn-after-show": (e: SynAfterShowEvent) => void;
@@ -70,7 +71,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-after-hide"?: ((e: SynAfterHideEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    icon?(_: {}): any;
 }>;
 export default _default;
 

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

@@ -1,10 +1,13 @@
 import '@synergy-design-system/components/components/badge/badge.js';
+import type { SynBadge } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * The badge's theme variant.
    */
     variant?: "primary" | "success" | "neutral" | "warning" | "danger" | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+}>, {
+    nativeElement: import("vue").Ref<SynBadge | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * The badge's theme variant.
    */

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

@@ -104,6 +104,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callGetForm: () => HTMLFormElement | null | undefined;
     callReportValidity: () => boolean | undefined;
     callSetCustomValidity: (message: string) => void | undefined;
+    nativeElement: import("vue").Ref<SynButton | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => void;
     "syn-focus": (e: SynFocusEvent) => void;
@@ -206,8 +207,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-invalid"?: ((e: SynInvalidEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    prefix?(_: {}): any;
-    suffix?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,4 +1,5 @@
 import '@synergy-design-system/components/components/button-group/button-group.js';
+import type { SynButtonGroup } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * A label to use for the button group.
@@ -6,7 +7,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   devices when interacting with the control and is strongly recommended.
    */
     label?: string | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+}>, {
+    nativeElement: import("vue").Ref<SynButtonGroup | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * A label to use for the button group.
   * This won't be displayed on the screen, but it will be announced by assistive

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/checkbox/checkbox.js';
-import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
+import type { SynBlurEvent, SynChangeEvent, SynCheckbox, SynFocusEvent, SynInputEvent, SynInvalidEvent } 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';
@@ -64,6 +64,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callGetForm: () => HTMLFormElement | null | undefined;
     callReportValidity: () => boolean | undefined;
     callSetCustomValidity: (message: string) => void | undefined;
+    nativeElement: import("vue").Ref<SynCheckbox | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => void;
     "syn-focus": (e: SynFocusEvent) => void;
@@ -129,7 +130,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onUpdate:modelValue"?: ((newValue: boolean) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    "help-text"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/dialog/dialog.js';
-import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynDialog, SynHideEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynShowEvent } from '@synergy-design-system/components';
 export type { SynShowEvent } from '@synergy-design-system/components';
 export type { SynAfterShowEvent } from '@synergy-design-system/components';
 export type { SynHideEvent } from '@synergy-design-system/components';
@@ -30,6 +30,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callHandleOpenChange: () => Promise<void> | undefined;
     callShow: () => Promise<void> | undefined;
     callHide: () => Promise<void> | undefined;
+    nativeElement: import("vue").Ref<SynDialog | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-show": (e: SynShowEvent) => void;
     "syn-after-show": (e: SynAfterShowEvent) => void;
@@ -66,9 +67,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-request-close"?: ((e: SynRequestCloseEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    label?(_: {}): any;
-    "header-actions"?(_: {}): any;
-    footer?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,4 +1,5 @@
 import '@synergy-design-system/components/components/divider/divider.js';
+import type { SynDivider } from '@synergy-design-system/components';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * Draws the divider in a vertical orientation.
@@ -6,6 +7,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     vertical?: boolean | undefined;
 }>, {
     callHandleVerticalChange: () => void | undefined;
+    nativeElement: import("vue").Ref<SynDivider | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * Draws the divider in a vertical orientation.

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/drawer/drawer.js';
-import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynDrawer, SynHideEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynShowEvent } from '@synergy-design-system/components';
 export type { SynShowEvent } from '@synergy-design-system/components';
 export type { SynAfterShowEvent } from '@synergy-design-system/components';
 export type { SynHideEvent } from '@synergy-design-system/components';
@@ -41,6 +41,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callHandleNoModalChange: () => void | undefined;
     callShow: () => Promise<void> | undefined;
     callHide: () => Promise<void> | undefined;
+    nativeElement: import("vue").Ref<SynDrawer | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-show": (e: SynShowEvent) => void;
     "syn-after-show": (e: SynAfterShowEvent) => void;
@@ -87,9 +88,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-request-close"?: ((e: SynRequestCloseEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    label?(_: {}): any;
-    "header-actions"?(_: {}): any;
-    footer?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -60,6 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callAddOpenListeners: () => void | undefined;
     callRemoveOpenListeners: () => void | undefined;
     callHandleOpenChange: () => Promise<void> | undefined;
+    nativeElement: import("vue").Ref<SynDropdown | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-show": (e: SynShowEvent) => void;
     "syn-after-show": (e: SynAfterShowEvent) => void;
@@ -114,7 +115,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-after-hide"?: ((e: SynAfterHideEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    trigger?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/header/header.js';
-import type { SynBurgerMenuHideEvent, SynBurgerMenuShowEvent } from '@synergy-design-system/components';
+import type { SynBurgerMenuHideEvent, SynBurgerMenuShowEvent, SynHeader } from '@synergy-design-system/components';
 export type { SynBurgerMenuShowEvent } from '@synergy-design-system/components';
 export type { SynBurgerMenuHideEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
@@ -20,6 +20,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     callHandleBurgerMenuVisible: () => void | undefined;
     callConnectSideNavigation: (sideNav: import("@synergy-design-system/components").SynSideNav) => void | undefined;
+    nativeElement: import("vue").Ref<SynHeader | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-burger-menu-show": (e: SynBurgerMenuShowEvent) => void;
     "syn-burger-menu-hide": (e: SynBurgerMenuHideEvent) => void;
@@ -43,11 +44,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-burger-menu-hide"?: ((e: SynBurgerMenuHideEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    logo?(_: {}): any;
-    "meta-navigation"?(_: {}): any;
-    navigation?(_: {}): any;
-    "show-burger-menu"?(_: {}): any;
-    "hide-burger-menu"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -27,6 +27,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
 }>, {
     callHandleLabelChange: () => void | undefined;
     callSetIcon: () => Promise<void> | undefined;
+    nativeElement: import("vue").Ref<SynIcon | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-load": (e: SynLoadEvent) => void;
     "syn-error": (e: SynErrorEvent) => void;

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

@@ -55,6 +55,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     callClick: () => void | undefined;
     callFocus: (options?: FocusOptions | undefined) => void | undefined;
     callBlur: () => void | undefined;
+    nativeElement: import("vue").Ref<SynIconButton | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => void;
     "syn-focus": (e: SynFocusEvent) => void;

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/input/input.js';
-import type { SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
+import type { SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInput, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
 export type { SynBlurEvent } from '@synergy-design-system/components';
 export type { SynChangeEvent } from '@synergy-design-system/components';
 export type { SynClearEvent } from '@synergy-design-system/components';
@@ -158,6 +158,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callGetForm: () => HTMLFormElement | null | undefined;
     callReportValidity: () => boolean | undefined;
     callSetCustomValidity: (message: string) => void | undefined;
+    nativeElement: import("vue").Ref<SynInput | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => void;
     "syn-focus": (e: SynFocusEvent) => void;
@@ -311,15 +312,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onUpdate:modelValue"?: ((newValue: string) => any) | undefined;
     "onSyn-clear"?: ((e: SynClearEvent) => any) | undefined;
 }, {}, {}>, {
-    label?(_: {}): any;
-    prefix?(_: {}): any;
-    suffix?(_: {}): any;
-    "clear-icon"?(_: {}): any;
-    "show-password-icon"?(_: {}): any;
-    "hide-password-icon"?(_: {}): any;
-    "help-text"?(_: {}): any;
-    "increment-number-stepper"?(_: {}): any;
-    "decrement-number-stepper"?(_: {}): any;
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,9 +1,11 @@
 import '@synergy-design-system/components/components/menu/menu.js';
-import type { SynSelectEvent } from '@synergy-design-system/components';
+import type { SynMenu, SynSelectEvent } from '@synergy-design-system/components';
 export type { SynSelectEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
     [x: string]: unknown;
-}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>>, {
+    nativeElement: import("vue").Ref<SynMenu | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-select": (e: SynSelectEvent) => void;
 }, string, import("vue").PublicProps, Readonly<readonly string[] | import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
     [x: string]: unknown;

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

@@ -1,4 +1,5 @@
 import '@synergy-design-system/components/components/menu-item/menu-item.js';
+import type { SynMenuItem } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * The type of menu item to render.
@@ -28,6 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callHandleTypeChange: () => void | undefined;
     callGetTextLabel: () => string | undefined;
     callIsSubmenu: () => boolean | undefined;
+    nativeElement: import("vue").Ref<SynMenuItem | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * The type of menu item to render.
@@ -53,9 +55,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     disabled?: boolean | undefined;
 }>>>, {}, {}>, {
     default?(_: {}): any;
-    prefix?(_: {}): any;
-    suffix?(_: {}): any;
-    submenu?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,7 +1,10 @@
 import '@synergy-design-system/components/components/menu-label/menu-label.js';
+import type { SynMenuLabel } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
     [x: string]: unknown;
-}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
+}>>, {
+    nativeElement: import("vue").Ref<SynMenuLabel | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
     [x: string]: unknown;
 }>>>>, {
     readonly [x: number]: string;

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/nav-item/nav-item.js';
-import type { SynBlurEvent, SynFocusEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
+import type { SynBlurEvent, SynFocusEvent, SynHideEvent, SynNavItem, SynShowEvent } from '@synergy-design-system/components';
 export type { SynShowEvent } from '@synergy-design-system/components';
 export type { SynHideEvent } from '@synergy-design-system/components';
 export type { SynBlurEvent } from '@synergy-design-system/components';
@@ -42,6 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callBlur: () => void | undefined;
     callClick: () => void | undefined;
     callFocus: (options?: FocusOptions | undefined) => void | undefined;
+    nativeElement: import("vue").Ref<SynNavItem | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-show": (e: SynShowEvent) => void;
     "syn-hide": (e: SynHideEvent) => void;
@@ -87,9 +88,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    prefix?(_: {}): any;
-    suffix?(_: {}): any;
-    children?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,4 +1,5 @@
 import '@synergy-design-system/components/components/optgroup/optgroup.js';
+import type { SynOptgroup } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * Disables all options in the optgroup.
@@ -11,6 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     label?: string | undefined;
 }>, {
     callHandleDisabledChange: () => void | undefined;
+    nativeElement: import("vue").Ref<SynOptgroup | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * Disables all options in the optgroup.
@@ -23,9 +25,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     label?: string | undefined;
 }>>>, {}, {}>, {
     default?(_: {}): any;
-    prefix?(_: {}): any;
-    label?(_: {}): any;
-    suffix?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,4 +1,5 @@
 import '@synergy-design-system/components/components/option/option.js';
+import type { SynOption } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * The option's value.
@@ -18,6 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callHandleSelectedChange: () => void | undefined;
     callHandleValueChange: () => void | undefined;
     callGetTextLabel: () => string | undefined;
+    nativeElement: import("vue").Ref<SynOption | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * The option's value.
@@ -34,8 +36,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     disabled?: boolean | undefined;
 }>>>, {}, {}>, {
     default?(_: {}): any;
-    prefix?(_: {}): any;
-    suffix?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/popup/popup.js';
-import type { SynRepositionEvent } from '@synergy-design-system/components';
+import type { SynPopup, SynRepositionEvent } from '@synergy-design-system/components';
 export type { SynRepositionEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
@@ -138,6 +138,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hoverBridge?: boolean | undefined;
 }>, {
     callReposition: () => void | undefined;
+    nativeElement: import("vue").Ref<SynPopup | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-reposition": (e: SynRepositionEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
@@ -279,7 +280,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-reposition"?: ((e: SynRepositionEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    anchor?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,11 +1,14 @@
 import '@synergy-design-system/components/components/prio-nav/prio-nav.js';
+import type { SynPrioNav } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * The components priority menu label.
   This will be shown after the priority menu 3 dots link
    */
     priorityMenuLabel?: string | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+}>, {
+    nativeElement: import("vue").Ref<SynPrioNav | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * The components priority menu label.
   This will be shown after the priority menu 3 dots link

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

@@ -1,4 +1,5 @@
 import '@synergy-design-system/components/components/progress-bar/progress-bar.js';
+import type { SynProgressBar } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * The current progress as a percentage, 0 to 100.
@@ -12,7 +13,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * A custom label for assistive devices.
    */
     label?: string | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+}>, {
+    nativeElement: import("vue").Ref<SynProgressBar | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * The current progress as a percentage, 0 to 100.
    */

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

@@ -1,4 +1,5 @@
 import '@synergy-design-system/components/components/progress-ring/progress-ring.js';
+import type { SynProgressRing } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * The current progress as a percentage, 0 to 100.
@@ -8,7 +9,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * A custom label for assistive devices.
    */
     label?: string | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+}>, {
+    nativeElement: import("vue").Ref<SynProgressRing | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * The current progress as a percentage, 0 to 100.
    */

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/radio/radio.js';
-import type { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';
+import type { SynBlurEvent, SynFocusEvent, SynRadio } from '@synergy-design-system/components';
 export type { SynBlurEvent } from '@synergy-design-system/components';
 export type { SynFocusEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
@@ -21,6 +21,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     callHandleCheckedChange: () => void | undefined;
     callHandleDisabledChange: () => void | undefined;
+    nativeElement: import("vue").Ref<SynRadio | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => void;
     "syn-focus": (e: SynFocusEvent) => void;

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/radio-button/radio-button.js';
-import type { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';
+import type { SynBlurEvent, SynFocusEvent, SynRadioButton } from '@synergy-design-system/components';
 export type { SynBlurEvent } from '@synergy-design-system/components';
 export type { SynFocusEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
@@ -22,6 +22,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callHandleDisabledChange: () => void | undefined;
     callFocus: (options?: FocusOptions | undefined) => void | undefined;
     callBlur: () => void | undefined;
+    nativeElement: import("vue").Ref<SynRadioButton | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => void;
     "syn-focus": (e: SynFocusEvent) => void;
@@ -46,8 +47,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    prefix?(_: {}): any;
-    suffix?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/radio-group/radio-group.js';
-import type { SynChangeEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent, SynInputEvent, SynInvalidEvent, SynRadioGroup } from '@synergy-design-system/components';
 export type { SynChangeEvent } from '@synergy-design-system/components';
 export type { SynInputEvent } from '@synergy-design-system/components';
 export type { SynInvalidEvent } from '@synergy-design-system/components';
@@ -52,6 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callGetForm: () => HTMLFormElement | null | undefined;
     callReportValidity: () => boolean | undefined;
     callSetCustomValidity: (message?: string | undefined) => void | undefined;
+    nativeElement: import("vue").Ref<SynRadioGroup | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-invalid": (e: SynInvalidEvent) => void;
     "syn-change": (e: SynChangeEvent) => void;
@@ -106,8 +107,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onUpdate:modelValue"?: ((newValue: string) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    label?(_: {}): any;
-    "help-text"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/select/select.js';
-import type { SynAfterHideEvent, SynAfterShowEvent, SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynHideEvent, SynInputEvent, SynInvalidEvent, SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynHideEvent, SynInputEvent, SynInvalidEvent, SynSelect, SynShowEvent } from '@synergy-design-system/components';
 export type { SynChangeEvent } from '@synergy-design-system/components';
 export type { SynClearEvent } from '@synergy-design-system/components';
 export type { SynInputEvent } from '@synergy-design-system/components';
@@ -114,6 +114,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callSetCustomValidity: (message: string) => void | undefined;
     callFocus: (options?: FocusOptions | undefined) => void | undefined;
     callBlur: () => void | undefined;
+    nativeElement: import("vue").Ref<SynSelect | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-show": (e: SynShowEvent) => void;
     "syn-after-show": (e: SynAfterShowEvent) => void;
@@ -232,11 +233,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-clear"?: ((e: SynClearEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    label?(_: {}): any;
-    prefix?(_: {}): any;
-    "clear-icon"?(_: {}): any;
-    "expand-icon"?(_: {}): any;
-    "help-text"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/side-nav/side-nav.js';
-import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent, SynSideNav } from '@synergy-design-system/components';
 export type { SynShowEvent } from '@synergy-design-system/components';
 export type { SynAfterShowEvent } from '@synergy-design-system/components';
 export type { SynHideEvent } from '@synergy-design-system/components';
@@ -42,6 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callHandleFocusTrapping: () => void | undefined;
     callShow: () => Promise<void> | undefined;
     callHide: () => Promise<void> | undefined;
+    nativeElement: import("vue").Ref<SynSideNav | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-show": (e: SynShowEvent) => void;
     "syn-after-show": (e: SynAfterShowEvent) => void;
@@ -86,7 +87,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-after-hide"?: ((e: SynAfterHideEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    footer?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {