@synergy-design-system/vue 1.27.0 → 2.1.0

package/README.md

@@ -139,39 +139,7 @@ An example for how these types can be used in case of event handling, is shown b
 </template>
 ```
 
-### 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.
-
-In Vue they can be used by prefixing each method name with `call`.
-
-`focus` -> `callFocus`, `click`-> `callClick`, ...
-
-An example for calling such a method in a Vue component is shown here:
-
-```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?.callStepUp();
-  };
-</script>
-
-<template>
-  <SynVueInput ref="count" label="My count" type="number" value="5" />
-  <SynVueButton @click="handleClick"> Increment </SynVueButton>
-</template>
-```
-
-### 7.2. Obtaining a reference to the underlying native element
+### 7. Obtaining a reference to the underlying native element (e.g. for usage of methods)
 
 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.
 

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

@@ -29,11 +29,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     duration?: number | undefined;
 }>, {
-    callHandleOpenChange: () => Promise<void> | undefined;
-    callHandleDurationChange: () => void | undefined;
-    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;

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

@@ -19,8 +19,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     rel?: string | undefined;
 }>, {
-    callHrefChanged: () => void | undefined;
-    callHandleSlotChange: () => void | undefined;
     nativeElement: import("vue").Ref<SynBreadcrumbItem | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**

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

@@ -96,14 +96,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     formTarget?: string | undefined;
 }>, {
-    callHandleDisabledChange: () => void | undefined;
-    callClick: () => void | undefined;
-    callFocus: (options?: FocusOptions | undefined) => void | undefined;
-    callBlur: () => void | undefined;
-    callCheckValidity: () => boolean | undefined;
-    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;

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

@@ -2,18 +2,20 @@ import '@synergy-design-system/components/components/card/card.js';
 import type { SynCard } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
-  * Draws the card as a nested item.
-  * Can be used when nesting multiple syn-cards to create hierarchy
+  * Draws the card with sharp edges.
+  * Can be used e.g.
+  * when nesting multiple syn-cards to create hierarchy.
    */
-    nested?: boolean | undefined;
+    sharp?: boolean | undefined;
 }>, {
     nativeElement: import("vue").Ref<SynCard | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
-  * Draws the card as a nested item.
-  * Can be used when nesting multiple syn-cards to create hierarchy
+  * Draws the card with sharp edges.
+  * Can be used e.g.
+  * when nesting multiple syn-cards to create hierarchy.
    */
-    nested?: boolean | undefined;
+    sharp?: boolean | undefined;
 }>>>, {}, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -55,15 +55,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     modelValue?: boolean | undefined;
 }>, {
-    callHandleDisabledChange: () => void | undefined;
-    callHandleStateChange: () => void | undefined;
-    callClick: () => void | undefined;
-    callFocus: (options?: FocusOptions | undefined) => void | undefined;
-    callBlur: () => void | undefined;
-    callCheckValidity: () => boolean | undefined;
-    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;

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

@@ -27,9 +27,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     noHeader?: boolean | undefined;
 }>, {
-    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;

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

@@ -6,7 +6,6 @@ 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<{
     /**

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

@@ -37,10 +37,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     noHeader?: boolean | undefined;
 }>, {
-    callHandleOpenChange: () => Promise<void> | undefined;
-    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;

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

@@ -47,19 +47,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     sync?: SynDropdown['sync'];
 }>, {
-    callFocusOnTrigger: () => void | undefined;
-    callGetMenu: () => import("@synergy-design-system/components").SynMenu | undefined;
-    callHandleTriggerClick: () => void | undefined;
-    callHandleTriggerKeyDown: (event: KeyboardEvent) => Promise<void> | undefined;
-    callHandleTriggerKeyUp: (event: KeyboardEvent) => void | undefined;
-    callHandleTriggerSlotChange: () => void | undefined;
-    callUpdateAccessibleTrigger: () => void | undefined;
-    callShow: () => Promise<void> | undefined;
-    callHide: () => Promise<void> | undefined;
-    callReposition: () => void | undefined;
-    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;

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

@@ -1,47 +1,48 @@
 import '@synergy-design-system/components/components/header/header.js';
-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';
+import type { SynBurgerMenuClosedEvent, SynBurgerMenuHiddenEvent, SynBurgerMenuOpenEvent, SynHeader } from '@synergy-design-system/components';
+export type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
+export type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
+export type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * The headers label.
-  * If you need to display HTML, use the `default` slot instead.
+  * If you need to display HTML, use the `label` slot instead.
    */
     label?: string | undefined;
     /**
-  * Adds a button to toggle the burger menu's visibility.
-  The button is added automatically, if the component finds a syn-side-nav in non-rail mode.
+  * Defines the current visibility and icon of the burger-menu icon.
+  The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.
+  The following values can be used:
+  - hidden: The burger menu is not visible
+  - open: The burger menu is visible and shows the close icon
+  - closed: The burger menu is visible and shows the open icon
    */
-    showBurgerMenu?: boolean | undefined;
-    /**
-  * Determines whether or not the burger menu is currently visible.
-   */
-    burgerMenuVisible?: boolean | undefined;
+    burgerMenu?: "open" | "hidden" | "closed" | undefined;
 }>, {
-    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;
+    "syn-burger-menu-closed": (e: SynBurgerMenuClosedEvent) => void;
+    "syn-burger-menu-hidden": (e: SynBurgerMenuHiddenEvent) => void;
+    "syn-burger-menu-open": (e: SynBurgerMenuOpenEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * The headers label.
-  * If you need to display HTML, use the `default` slot instead.
+  * If you need to display HTML, use the `label` slot instead.
    */
     label?: string | undefined;
     /**
-  * Adds a button to toggle the burger menu's visibility.
-  The button is added automatically, if the component finds a syn-side-nav in non-rail mode.
-   */
-    showBurgerMenu?: boolean | undefined;
-    /**
-  * Determines whether or not the burger menu is currently visible.
+  * Defines the current visibility and icon of the burger-menu icon.
+  The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.
+  The following values can be used:
+  - hidden: The burger menu is not visible
+  - open: The burger menu is visible and shows the close icon
+  - closed: The burger menu is visible and shows the open icon
    */
-    burgerMenuVisible?: boolean | undefined;
+    burgerMenu?: "open" | "hidden" | "closed" | undefined;
 }>>> & {
-    "onSyn-burger-menu-show"?: ((e: SynBurgerMenuShowEvent) => any) | undefined;
-    "onSyn-burger-menu-hide"?: ((e: SynBurgerMenuHideEvent) => any) | undefined;
+    "onSyn-burger-menu-closed"?: ((e: SynBurgerMenuClosedEvent) => any) | undefined;
+    "onSyn-burger-menu-hidden"?: ((e: SynBurgerMenuHiddenEvent) => any) | undefined;
+    "onSyn-burger-menu-open"?: ((e: SynBurgerMenuOpenEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -25,8 +25,6 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
    */
     library?: string | undefined;
 }>, {
-    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;

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

@@ -52,9 +52,6 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
    */
     disabled?: boolean | undefined;
 }>, {
-    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;

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

@@ -143,21 +143,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     modelValue?: string | undefined;
 }>, {
-    callHandleDisabledChange: () => void | undefined;
-    callHandleStepChange: () => void | undefined;
-    callHandleValueChange: () => Promise<void> | undefined;
-    callFocus: (options?: FocusOptions | undefined) => void | undefined;
-    callBlur: () => void | undefined;
-    callSelect: () => void | undefined;
-    callSetSelectionRange: (selectionStart: number, selectionEnd: number, selectionDirection?: "none" | "forward" | "backward" | undefined) => void | undefined;
-    callSetRangeText: (replacement: string, start?: number | undefined, end?: number | undefined, selectMode?: "select" | "end" | "start" | "preserve" | undefined) => void | undefined;
-    callShowPicker: () => void | undefined;
-    callStepUp: () => void | undefined;
-    callStepDown: () => void | undefined;
-    callCheckValidity: () => boolean | undefined;
-    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;

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

@@ -24,11 +24,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     disabled?: boolean | undefined;
 }>, {
-    callHandleCheckedChange: () => void | undefined;
-    callHandleDisabledChange: () => void | undefined;
-    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<{
     /**

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

@@ -38,10 +38,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     divider?: boolean | undefined;
 }>, {
-    callHandleOpenChange: () => void | undefined;
-    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;

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

@@ -11,7 +11,6 @@ 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<{
     /**

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

@@ -15,10 +15,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     disabled?: boolean | undefined;
 }>, {
-    callHandleDisabledChange: () => void | undefined;
-    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<{
     /**

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

@@ -137,7 +137,6 @@ 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;

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

@@ -1,20 +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;
-}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
+    [x: string]: unknown;
+}>>, {
     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
-   */
-    priorityMenuLabel?: string | 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;
+} | {}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
@@ -23,12 +17,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $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/SynVueRadio.vue.d.ts

@@ -19,8 +19,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     disabled?: boolean | undefined;
 }>, {
-    callHandleCheckedChange: () => void | undefined;
-    callHandleDisabledChange: () => void | undefined;
     nativeElement: import("vue").Ref<SynRadio | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => void;

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

@@ -23,9 +23,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     pill?: boolean | undefined;
 }>, {
-    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;

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

@@ -46,12 +46,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     modelValue?: string | undefined;
 }>, {
-    callHandleSizeChange: () => void | undefined;
-    callHandleValueChange: () => void | undefined;
-    callCheckValidity: () => boolean | undefined;
-    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;

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

@@ -103,17 +103,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     modelValue?: string | string[] | undefined;
 }>, {
-    callHandleDisabledChange: () => void | undefined;
-    callHandleValueChange: () => void | undefined;
-    callHandleOpenChange: () => Promise<void> | undefined;
-    callShow: () => Promise<void> | undefined;
-    callHide: () => Promise<void> | undefined;
-    callCheckValidity: () => boolean | undefined;
-    callGetForm: () => HTMLFormElement | null | undefined;
-    callReportValidity: () => boolean | undefined;
-    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;

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

@@ -37,11 +37,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     noFocusTrapping?: boolean | undefined;
 }>, {
-    callHandleModeChange: () => void | undefined;
-    callHandleOpenChange: () => void | undefined;
-    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;

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

@@ -49,15 +49,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     modelValue?: boolean | undefined;
 }>, {
-    callHandleCheckedChange: () => void | undefined;
-    callHandleDisabledChange: () => void | undefined;
-    callClick: () => void | undefined;
-    callFocus: (options?: FocusOptions | undefined) => void | undefined;
-    callBlur: () => void | undefined;
-    callCheckValidity: () => boolean | undefined;
-    callGetForm: () => HTMLFormElement | null | undefined;
-    callReportValidity: () => boolean | undefined;
-    callSetCustomValidity: (message: string) => void | undefined;
     nativeElement: import("vue").Ref<SynSwitch | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => void;

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

@@ -0,0 +1,63 @@
+import '@synergy-design-system/components/components/tab/tab.js';
+import type { SynCloseEvent, SynTab } from '@synergy-design-system/components';
+export type { SynCloseEvent } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * The name of the tab panel this tab is associated with.
+  * The panel must be located in the same tab group.
+   */
+    panel?: string | undefined;
+    /**
+  * Draws the tab in an active state.
+   */
+    active?: boolean | undefined;
+    /**
+  * Makes the tab closable and shows a close button.
+   */
+    closable?: boolean | undefined;
+    /**
+  * Disables the tab and prevents selection.
+   */
+    disabled?: boolean | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynTab | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "syn-close": (e: SynCloseEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * The name of the tab panel this tab is associated with.
+  * The panel must be located in the same tab group.
+   */
+    panel?: string | undefined;
+    /**
+  * Draws the tab in an active state.
+   */
+    active?: boolean | undefined;
+    /**
+  * Makes the tab closable and shows a close button.
+   */
+    closable?: boolean | undefined;
+    /**
+  * Disables the tab and prevents selection.
+   */
+    disabled?: boolean | undefined;
+}>>> & {
+    "onSyn-close"?: ((e: SynCloseEvent) => 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/SynVueTabGroup.vue.d.ts

@@ -0,0 +1,78 @@
+import '@synergy-design-system/components/components/tab-group/tab-group.js';
+import type { SynTabGroup, SynTabHideEvent, SynTabShowEvent } from '@synergy-design-system/components';
+export type { SynTabShowEvent } from '@synergy-design-system/components';
+export type { SynTabHideEvent } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * The placement of the tabs.
+   */
+    placement?: "top" | "end" | "start" | undefined;
+    /**
+  * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel.
+  * When set to
+  manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+   */
+    activation?: "auto" | "manual" | undefined;
+    /**
+  * Disables the scroll arrows that appear when tabs overflow.
+   */
+    noScrollControls?: boolean | undefined;
+    /**
+  * Draws the tab group as a contained element.
+   */
+    contained?: boolean | undefined;
+    /**
+  * Draws the tab group with edges instead of roundings.
+  * Takes only effect if used with the 'contained' property
+   */
+    sharp?: boolean | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynTabGroup | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "syn-tab-show": (e: SynTabShowEvent) => void;
+    "syn-tab-hide": (e: SynTabHideEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * The placement of the tabs.
+   */
+    placement?: "top" | "end" | "start" | undefined;
+    /**
+  * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel.
+  * When set to
+  manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+   */
+    activation?: "auto" | "manual" | undefined;
+    /**
+  * Disables the scroll arrows that appear when tabs overflow.
+   */
+    noScrollControls?: boolean | undefined;
+    /**
+  * Draws the tab group as a contained element.
+   */
+    contained?: boolean | undefined;
+    /**
+  * Draws the tab group with edges instead of roundings.
+  * Takes only effect if used with the 'contained' property
+   */
+    sharp?: boolean | undefined;
+}>>> & {
+    "onSyn-tab-show"?: ((e: SynTabShowEvent) => any) | undefined;
+    "onSyn-tab-hide"?: ((e: SynTabHideEvent) => 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;
+    };
+};