@synergy-design-system/vue 1.23.1 → 1.24.0

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

@@ -1,7 +1,10 @@
 import '@synergy-design-system/components/components/spinner/spinner.js';
+import type { SynSpinner } from '@synergy-design-system/components';
 declare const _default: 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<SynSpinner | 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/SynVueSwitch.vue.d.ts

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/switch/switch.js';
-import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
+import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynSwitch } from '@synergy-design-system/components';
 export type { SynBlurEvent } from '@synergy-design-system/components';
 export type { SynChangeEvent } from '@synergy-design-system/components';
 export type { SynInputEvent } from '@synergy-design-system/components';
@@ -58,6 +58,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<SynSwitch | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => void;
     "syn-focus": (e: SynFocusEvent) => void;
@@ -117,7 +118,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/SynVueTag.vue.d.ts

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/tag/tag.js';
-import type { SynRemoveEvent } from '@synergy-design-system/components';
+import type { SynRemoveEvent, SynTag } from '@synergy-design-system/components';
 export type { SynRemoveEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
@@ -10,7 +10,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * Makes the tag removable and shows a remove button.
    */
     removable?: boolean | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    nativeElement: import("vue").Ref<SynTag | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-remove": (e: SynRemoveEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/textarea/textarea.js';
-import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
+import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynTextarea } 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';
@@ -212,6 +212,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<SynTextarea | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-blur": (e: SynBlurEvent) => void;
     "syn-focus": (e: SynFocusEvent) => void;
@@ -326,8 +327,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((newValue: string) => any) | undefined;
 }, {}, {}>, {
-    label?(_: {}): any;
-    "help-text"?(_: {}): any;
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,5 +1,5 @@
 import '@synergy-design-system/components/components/tooltip/tooltip.js';
-import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent, SynTooltip } 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';
@@ -55,6 +55,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callHandleDisabledChange: () => void | undefined;
     callShow: () => Promise<void> | undefined;
     callHide: () => Promise<void> | undefined;
+    nativeElement: import("vue").Ref<SynTooltip | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-show": (e: SynShowEvent) => void;
     "syn-after-show": (e: SynAfterShowEvent) => void;
@@ -112,7 +113,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onSyn-after-hide"?: ((e: SynAfterHideEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
-    content?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/package.json

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

package/src/components/SynVueAlert.vue

@@ -38,19 +38,19 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynAlert>();
+const nativeElement = ref<SynAlert>();
 
 // Map methods
-const callHandleOpenChange = (...args: Parameters<SynAlert['handleOpenChange']>) => element.value?.handleOpenChange(...args);
-const callHandleDurationChange = (...args: Parameters<SynAlert['handleDurationChange']>) => element.value?.handleDurationChange(...args);
+const callHandleOpenChange = (...args: Parameters<SynAlert['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
+const callHandleDurationChange = (...args: Parameters<SynAlert['handleDurationChange']>) => nativeElement.value?.handleDurationChange(...args);
 /**
 * Shows the alert.
  */
-const callShow = (...args: Parameters<SynAlert['show']>) => element.value?.show(...args);
+const callShow = (...args: Parameters<SynAlert['show']>) => nativeElement.value?.show(...args);
 /**
 * Hides the alert
  */
-const callHide = (...args: Parameters<SynAlert['hide']>) => element.value?.hide(...args);
+const callHide = (...args: Parameters<SynAlert['hide']>) => nativeElement.value?.hide(...args);
 /**
 * Displays the alert as a toast notification.
 * This will move the alert out of its position in the DOM and, when
@@ -59,7 +59,7 @@ dismissed, it will be removed from the DOM completely.
 calling this method again.
 * The returned promise will resolve after the alert is hidden.
  */
-const callToast = (...args: Parameters<SynAlert['toast']>) => element.value?.toast(...args);
+const callToast = (...args: Parameters<SynAlert['toast']>) => nativeElement.value?.toast(...args);
 
 defineExpose({
   callHandleOpenChange,
@@ -67,6 +67,7 @@ defineExpose({
   callShow,
   callHide,
   callToast,
+  nativeElement,
 });
 
 // Map attributes
@@ -143,7 +144,7 @@ export type { SynAfterHideEvent } from '@synergy-design-system/components';
 <template>
   <syn-alert
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     @syn-show="$emit('syn-show', $event)"
     @syn-after-show="$emit('syn-after-show', $event)"
 
@@ -151,6 +152,5 @@ export type { SynAfterHideEvent } from '@synergy-design-system/components';
     @syn-after-hide="$emit('syn-after-hide', $event)"
   >
     <slot />
-    <slot name="icon" />
   </syn-alert>
 </template>

package/src/components/SynVueBadge.vue

@@ -21,12 +21,13 @@ import '@synergy-design-system/components/components/badge/badge.js';
 import type { SynBadge } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynBadge>();
+const nativeElement = ref<SynBadge>();
 
 // Map methods
 
 defineExpose({
 
+  nativeElement,
 });
 
 // Map attributes
@@ -57,7 +58,7 @@ defineEmits<{
   <syn-badge
 
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
   >
     <slot />
   </syn-badge>

package/src/components/SynVueButton.vue

@@ -37,40 +37,40 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynButton>();
+const nativeElement = ref<SynButton>();
 
 // Map methods
-const callHandleDisabledChange = (...args: Parameters<SynButton['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynButton['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
 /**
 * Simulates a click on the button.
  */
-const callClick = (...args: Parameters<SynButton['click']>) => element.value?.click(...args);
+const callClick = (...args: Parameters<SynButton['click']>) => nativeElement.value?.click(...args);
 /**
 * Sets focus on the button.
  */
-const callFocus = (...args: Parameters<SynButton['focus']>) => element.value?.focus(...args);
+const callFocus = (...args: Parameters<SynButton['focus']>) => nativeElement.value?.focus(...args);
 /**
 * Removes focus from the button.
  */
-const callBlur = (...args: Parameters<SynButton['blur']>) => element.value?.blur(...args);
+const callBlur = (...args: Parameters<SynButton['blur']>) => nativeElement.value?.blur(...args);
 /**
 * Checks for validity but does not show a validation message.
 * Returns `true` when valid and `false` when invalid.
  */
-const callCheckValidity = (...args: Parameters<SynButton['checkValidity']>) => element.value?.checkValidity(...args);
+const callCheckValidity = (...args: Parameters<SynButton['checkValidity']>) => nativeElement.value?.checkValidity(...args);
 /**
 * Gets the associated form, if one exists.
  */
-const callGetForm = (...args: Parameters<SynButton['getForm']>) => element.value?.getForm(...args);
+const callGetForm = (...args: Parameters<SynButton['getForm']>) => nativeElement.value?.getForm(...args);
 /**
 * Checks for validity and shows the browser's validation message if the control is invalid.
  */
-const callReportValidity = (...args: Parameters<SynButton['reportValidity']>) => element.value?.reportValidity(...args);
+const callReportValidity = (...args: Parameters<SynButton['reportValidity']>) => nativeElement.value?.reportValidity(...args);
 /**
 * Sets a custom validation message.
 * Pass an empty string to restore validity.
  */
-const callSetCustomValidity = (...args: Parameters<SynButton['setCustomValidity']>) => element.value?.setCustomValidity(...args);
+const callSetCustomValidity = (...args: Parameters<SynButton['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
 
 defineExpose({
   callHandleDisabledChange,
@@ -81,6 +81,7 @@ defineExpose({
   callGetForm,
   callReportValidity,
   callSetCustomValidity,
+  nativeElement,
 });
 
 // Map attributes
@@ -234,14 +235,12 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
 <template>
   <syn-button
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     @syn-blur="$emit('syn-blur', $event)"
 
     @syn-focus="$emit('syn-focus', $event)"
     @syn-invalid="$emit('syn-invalid', $event)"
   >
     <slot />
-    <slot name="prefix" />
-    <slot name="suffix" />
   </syn-button>
 </template>

package/src/components/SynVueButtonGroup.vue

@@ -21,12 +21,13 @@ import '@synergy-design-system/components/components/button-group/button-group.j
 import type { SynButtonGroup } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynButtonGroup>();
+const nativeElement = ref<SynButtonGroup>();
 
 // Map methods
 
 defineExpose({
 
+  nativeElement,
 });
 
 // Map attributes
@@ -59,7 +60,7 @@ defineEmits<{
   <syn-button-group
 
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
   >
     <slot />
   </syn-button-group>

package/src/components/SynVueCheckbox.vue

@@ -39,43 +39,43 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynCheckbox>();
+const nativeElement = ref<SynCheckbox>();
 
 // Map methods
-const callHandleDisabledChange = (...args: Parameters<SynCheckbox['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
-const callHandleStateChange = (...args: Parameters<SynCheckbox['handleStateChange']>) => element.value?.handleStateChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynCheckbox['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
+const callHandleStateChange = (...args: Parameters<SynCheckbox['handleStateChange']>) => nativeElement.value?.handleStateChange(...args);
 /**
 * Simulates a click on the checkbox.
  */
-const callClick = (...args: Parameters<SynCheckbox['click']>) => element.value?.click(...args);
+const callClick = (...args: Parameters<SynCheckbox['click']>) => nativeElement.value?.click(...args);
 /**
 * Sets focus on the checkbox.
  */
-const callFocus = (...args: Parameters<SynCheckbox['focus']>) => element.value?.focus(...args);
+const callFocus = (...args: Parameters<SynCheckbox['focus']>) => nativeElement.value?.focus(...args);
 /**
 * Removes focus from the checkbox.
  */
-const callBlur = (...args: Parameters<SynCheckbox['blur']>) => element.value?.blur(...args);
+const callBlur = (...args: Parameters<SynCheckbox['blur']>) => nativeElement.value?.blur(...args);
 /**
 * Checks for validity but does not show a validation message.
 * Returns `true` when valid and `false` when invalid.
  */
-const callCheckValidity = (...args: Parameters<SynCheckbox['checkValidity']>) => element.value?.checkValidity(...args);
+const callCheckValidity = (...args: Parameters<SynCheckbox['checkValidity']>) => nativeElement.value?.checkValidity(...args);
 /**
 * Gets the associated form, if one exists.
  */
-const callGetForm = (...args: Parameters<SynCheckbox['getForm']>) => element.value?.getForm(...args);
+const callGetForm = (...args: Parameters<SynCheckbox['getForm']>) => nativeElement.value?.getForm(...args);
 /**
 * Checks for validity and shows the browser's validation message if the control is invalid.
  */
-const callReportValidity = (...args: Parameters<SynCheckbox['reportValidity']>) => element.value?.reportValidity(...args);
+const callReportValidity = (...args: Parameters<SynCheckbox['reportValidity']>) => nativeElement.value?.reportValidity(...args);
 /**
 * Sets a custom validation message.
 * The value provided will be shown to the user when the form is submitted.
 * To clear
 the custom validation message, call this method with an empty string.
  */
-const callSetCustomValidity = (...args: Parameters<SynCheckbox['setCustomValidity']>) => element.value?.setCustomValidity(...args);
+const callSetCustomValidity = (...args: Parameters<SynCheckbox['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
 
 defineExpose({
   callHandleDisabledChange,
@@ -87,6 +87,7 @@ defineExpose({
   callGetForm,
   callReportValidity,
   callSetCustomValidity,
+  nativeElement,
 });
 
 // Map attributes
@@ -206,7 +207,7 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
 <template>
   <syn-checkbox
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     :checked="typeof props.modelValue !== 'undefined' ? props.modelValue : typeof props.checked !== 'undefined' ? props.checked : undefined"
     @syn-blur="$emit('syn-blur', $event)"
     @syn-change="$emit('syn-change', $event)"
@@ -215,6 +216,5 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
     @syn-invalid="$emit('syn-invalid', $event)"
   >
     <slot />
-    <slot name="help-text" />
   </syn-checkbox>
 </template>

package/src/components/SynVueDialog.vue

@@ -63,23 +63,24 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynDialog>();
+const nativeElement = ref<SynDialog>();
 
 // Map methods
-const callHandleOpenChange = (...args: Parameters<SynDialog['handleOpenChange']>) => element.value?.handleOpenChange(...args);
+const callHandleOpenChange = (...args: Parameters<SynDialog['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
 /**
 * Shows the dialog.
  */
-const callShow = (...args: Parameters<SynDialog['show']>) => element.value?.show(...args);
+const callShow = (...args: Parameters<SynDialog['show']>) => nativeElement.value?.show(...args);
 /**
 * Hides the dialog
  */
-const callHide = (...args: Parameters<SynDialog['hide']>) => element.value?.hide(...args);
+const callHide = (...args: Parameters<SynDialog['hide']>) => nativeElement.value?.hide(...args);
 
 defineExpose({
   callHandleOpenChange,
   callShow,
   callHide,
+  nativeElement,
 });
 
 // Map attributes
@@ -166,7 +167,7 @@ export type { SynRequestCloseEvent } from '@synergy-design-system/components';
 <template>
   <syn-dialog
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     @syn-show="$emit('syn-show', $event)"
     @syn-after-show="$emit('syn-after-show', $event)"
     @syn-hide="$emit('syn-hide', $event)"
@@ -176,8 +177,5 @@ export type { SynRequestCloseEvent } from '@synergy-design-system/components';
     @syn-request-close="$emit('syn-request-close', $event)"
   >
     <slot />
-    <slot name="label" />
-    <slot name="header-actions" />
-    <slot name="footer" />
   </syn-dialog>
 </template>

package/src/components/SynVueDivider.vue

@@ -21,13 +21,14 @@ import '@synergy-design-system/components/components/divider/divider.js';
 import type { SynDivider } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynDivider>();
+const nativeElement = ref<SynDivider>();
 
 // Map methods
-const callHandleVerticalChange = (...args: Parameters<SynDivider['handleVerticalChange']>) => element.value?.handleVerticalChange(...args);
+const callHandleVerticalChange = (...args: Parameters<SynDivider['handleVerticalChange']>) => nativeElement.value?.handleVerticalChange(...args);
 
 defineExpose({
   callHandleVerticalChange,
+  nativeElement,
 });
 
 // Map attributes
@@ -58,6 +59,6 @@ defineEmits<{
   <syn-divider
 
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
   />
 </template>

package/src/components/SynVueDrawer.vue

@@ -70,25 +70,26 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynDrawer>();
+const nativeElement = ref<SynDrawer>();
 
 // Map methods
-const callHandleOpenChange = (...args: Parameters<SynDrawer['handleOpenChange']>) => element.value?.handleOpenChange(...args);
-const callHandleNoModalChange = (...args: Parameters<SynDrawer['handleNoModalChange']>) => element.value?.handleNoModalChange(...args);
+const callHandleOpenChange = (...args: Parameters<SynDrawer['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
+const callHandleNoModalChange = (...args: Parameters<SynDrawer['handleNoModalChange']>) => nativeElement.value?.handleNoModalChange(...args);
 /**
 * Shows the drawer.
  */
-const callShow = (...args: Parameters<SynDrawer['show']>) => element.value?.show(...args);
+const callShow = (...args: Parameters<SynDrawer['show']>) => nativeElement.value?.show(...args);
 /**
 * Hides the drawer
  */
-const callHide = (...args: Parameters<SynDrawer['hide']>) => element.value?.hide(...args);
+const callHide = (...args: Parameters<SynDrawer['hide']>) => nativeElement.value?.hide(...args);
 
 defineExpose({
   callHandleOpenChange,
   callHandleNoModalChange,
   callShow,
   callHide,
+  nativeElement,
 });
 
 // Map attributes
@@ -187,7 +188,7 @@ export type { SynRequestCloseEvent } from '@synergy-design-system/components';
 <template>
   <syn-drawer
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     @syn-show="$emit('syn-show', $event)"
     @syn-after-show="$emit('syn-after-show', $event)"
     @syn-hide="$emit('syn-hide', $event)"
@@ -197,8 +198,5 @@ export type { SynRequestCloseEvent } from '@synergy-design-system/components';
     @syn-request-close="$emit('syn-request-close', $event)"
   >
     <slot />
-    <slot name="label" />
-    <slot name="header-actions" />
-    <slot name="footer" />
   </syn-drawer>
 </template>

package/src/components/SynVueDropdown.vue

@@ -36,33 +36,33 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynDropdown>();
+const nativeElement = ref<SynDropdown>();
 
 // Map methods
-const callFocusOnTrigger = (...args: Parameters<SynDropdown['focusOnTrigger']>) => element.value?.focusOnTrigger(...args);
-const callGetMenu = (...args: Parameters<SynDropdown['getMenu']>) => element.value?.getMenu(...args);
-const callHandleTriggerClick = (...args: Parameters<SynDropdown['handleTriggerClick']>) => element.value?.handleTriggerClick(...args);
-const callHandleTriggerKeyDown = (...args: Parameters<SynDropdown['handleTriggerKeyDown']>) => element.value?.handleTriggerKeyDown(...args);
-const callHandleTriggerKeyUp = (...args: Parameters<SynDropdown['handleTriggerKeyUp']>) => element.value?.handleTriggerKeyUp(...args);
-const callHandleTriggerSlotChange = (...args: Parameters<SynDropdown['handleTriggerSlotChange']>) => element.value?.handleTriggerSlotChange(...args);
-const callUpdateAccessibleTrigger = (...args: Parameters<SynDropdown['updateAccessibleTrigger']>) => element.value?.updateAccessibleTrigger(...args);
+const callFocusOnTrigger = (...args: Parameters<SynDropdown['focusOnTrigger']>) => nativeElement.value?.focusOnTrigger(...args);
+const callGetMenu = (...args: Parameters<SynDropdown['getMenu']>) => nativeElement.value?.getMenu(...args);
+const callHandleTriggerClick = (...args: Parameters<SynDropdown['handleTriggerClick']>) => nativeElement.value?.handleTriggerClick(...args);
+const callHandleTriggerKeyDown = (...args: Parameters<SynDropdown['handleTriggerKeyDown']>) => nativeElement.value?.handleTriggerKeyDown(...args);
+const callHandleTriggerKeyUp = (...args: Parameters<SynDropdown['handleTriggerKeyUp']>) => nativeElement.value?.handleTriggerKeyUp(...args);
+const callHandleTriggerSlotChange = (...args: Parameters<SynDropdown['handleTriggerSlotChange']>) => nativeElement.value?.handleTriggerSlotChange(...args);
+const callUpdateAccessibleTrigger = (...args: Parameters<SynDropdown['updateAccessibleTrigger']>) => nativeElement.value?.updateAccessibleTrigger(...args);
 /**
 * Shows the dropdown panel.
  */
-const callShow = (...args: Parameters<SynDropdown['show']>) => element.value?.show(...args);
+const callShow = (...args: Parameters<SynDropdown['show']>) => nativeElement.value?.show(...args);
 /**
 * Hides the dropdown panel
  */
-const callHide = (...args: Parameters<SynDropdown['hide']>) => element.value?.hide(...args);
+const callHide = (...args: Parameters<SynDropdown['hide']>) => nativeElement.value?.hide(...args);
 /**
 * Instructs the dropdown menu to reposition.
 * Useful when the position or size of the trigger changes when the menu
 is activated.
  */
-const callReposition = (...args: Parameters<SynDropdown['reposition']>) => element.value?.reposition(...args);
-const callAddOpenListeners = (...args: Parameters<SynDropdown['addOpenListeners']>) => element.value?.addOpenListeners(...args);
-const callRemoveOpenListeners = (...args: Parameters<SynDropdown['removeOpenListeners']>) => element.value?.removeOpenListeners(...args);
-const callHandleOpenChange = (...args: Parameters<SynDropdown['handleOpenChange']>) => element.value?.handleOpenChange(...args);
+const callReposition = (...args: Parameters<SynDropdown['reposition']>) => nativeElement.value?.reposition(...args);
+const callAddOpenListeners = (...args: Parameters<SynDropdown['addOpenListeners']>) => nativeElement.value?.addOpenListeners(...args);
+const callRemoveOpenListeners = (...args: Parameters<SynDropdown['removeOpenListeners']>) => nativeElement.value?.removeOpenListeners(...args);
+const callHandleOpenChange = (...args: Parameters<SynDropdown['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
 
 defineExpose({
   callFocusOnTrigger,
@@ -78,6 +78,7 @@ defineExpose({
   callAddOpenListeners,
   callRemoveOpenListeners,
   callHandleOpenChange,
+  nativeElement,
 });
 
 // Map attributes
@@ -176,7 +177,7 @@ export type { SynAfterHideEvent } from '@synergy-design-system/components';
 <template>
   <syn-dropdown
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     @syn-show="$emit('syn-show', $event)"
     @syn-after-show="$emit('syn-after-show', $event)"
 
@@ -184,6 +185,5 @@ export type { SynAfterHideEvent } from '@synergy-design-system/components';
     @syn-after-hide="$emit('syn-after-hide', $event)"
   >
     <slot />
-    <slot name="trigger" />
   </syn-dropdown>
 </template>

package/src/components/SynVueHeader.vue

@@ -38,10 +38,10 @@ import '@synergy-design-system/components/components/header/header.js';
 import type { SynBurgerMenuHideEvent, SynBurgerMenuShowEvent, SynHeader } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynHeader>();
+const nativeElement = ref<SynHeader>();
 
 // Map methods
-const callHandleBurgerMenuVisible = (...args: Parameters<SynHeader['handleBurgerMenuVisible']>) => element.value?.handleBurgerMenuVisible(...args);
+const callHandleBurgerMenuVisible = (...args: Parameters<SynHeader['handleBurgerMenuVisible']>) => nativeElement.value?.handleBurgerMenuVisible(...args);
 /**
 * Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation
 like showing the burger menu icon and open / close handling.
@@ -49,11 +49,12 @@ like showing the burger menu icon and open / close handling.
 If no side navigation is connected, the header will use the first `syn-side-nav` element it
 finds.
  */
-const callConnectSideNavigation = (...args: Parameters<SynHeader['connectSideNavigation']>) => element.value?.connectSideNavigation(...args);
+const callConnectSideNavigation = (...args: Parameters<SynHeader['connectSideNavigation']>) => nativeElement.value?.connectSideNavigation(...args);
 
 defineExpose({
   callHandleBurgerMenuVisible,
   callConnectSideNavigation,
+  nativeElement,
 });
 
 // Map attributes
@@ -108,16 +109,11 @@ export type { SynBurgerMenuHideEvent } from '@synergy-design-system/components';
 <template>
   <syn-header
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
 
     @syn-burger-menu-show="$emit('syn-burger-menu-show', $event)"
     @syn-burger-menu-hide="$emit('syn-burger-menu-hide', $event)"
   >
     <slot />
-    <slot name="logo" />
-    <slot name="meta-navigation" />
-    <slot name="navigation" />
-    <slot name="show-burger-menu" />
-    <slot name="hide-burger-menu" />
   </syn-header>
 </template>