@synergy-design-system/vue 1.23.1 → 1.24.0

package/src/components/SynVueIcon.vue

@@ -23,15 +23,16 @@ import '@synergy-design-system/components/components/icon/icon.js';
 import type { SynErrorEvent, SynIcon, SynLoadEvent } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynIcon>();
+const nativeElement = ref<SynIcon>();
 
 // Map methods
-const callHandleLabelChange = (...args: Parameters<SynIcon['handleLabelChange']>) => element.value?.handleLabelChange(...args);
-const callSetIcon = (...args: Parameters<SynIcon['setIcon']>) => element.value?.setIcon(...args);
+const callHandleLabelChange = (...args: Parameters<SynIcon['handleLabelChange']>) => nativeElement.value?.handleLabelChange(...args);
+const callSetIcon = (...args: Parameters<SynIcon['setIcon']>) => nativeElement.value?.setIcon(...args);
 
 defineExpose({
   callHandleLabelChange,
   callSetIcon,
+  nativeElement,
 });
 
 // Map attributes
@@ -96,7 +97,7 @@ export type { SynErrorEvent } from '@synergy-design-system/components';
 <template>
   <syn-icon
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
 
     @syn-load="$emit('syn-load', $event)"
     @syn-error="$emit('syn-error', $event)"

package/src/components/SynVueIconButton.vue

@@ -24,26 +24,27 @@ import '@synergy-design-system/components/components/icon-button/icon-button.js'
 import type { SynBlurEvent, SynFocusEvent, SynIconButton } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynIconButton>();
+const nativeElement = ref<SynIconButton>();
 
 // Map methods
 /**
 * Simulates a click on the icon button.
  */
-const callClick = (...args: Parameters<SynIconButton['click']>) => element.value?.click(...args);
+const callClick = (...args: Parameters<SynIconButton['click']>) => nativeElement.value?.click(...args);
 /**
 * Sets focus on the icon button.
  */
-const callFocus = (...args: Parameters<SynIconButton['focus']>) => element.value?.focus(...args);
+const callFocus = (...args: Parameters<SynIconButton['focus']>) => nativeElement.value?.focus(...args);
 /**
 * Removes focus from the icon button.
  */
-const callBlur = (...args: Parameters<SynIconButton['blur']>) => element.value?.blur(...args);
+const callBlur = (...args: Parameters<SynIconButton['blur']>) => nativeElement.value?.blur(...args);
 
 defineExpose({
   callClick,
   callFocus,
   callBlur,
+  nativeElement,
 });
 
 // Map attributes
@@ -139,7 +140,7 @@ export type { SynFocusEvent } from '@synergy-design-system/components';
 <template>
   <syn-icon-button
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
 
     @syn-blur="$emit('syn-blur', $event)"
     @syn-focus="$emit('syn-focus', $event)"

package/src/components/SynVueInput.vue

@@ -54,62 +54,62 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynInput>();
+const nativeElement = ref<SynInput>();
 
 // Map methods
-const callHandleDisabledChange = (...args: Parameters<SynInput['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
-const callHandleStepChange = (...args: Parameters<SynInput['handleStepChange']>) => element.value?.handleStepChange(...args);
-const callHandleValueChange = (...args: Parameters<SynInput['handleValueChange']>) => element.value?.handleValueChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynInput['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
+const callHandleStepChange = (...args: Parameters<SynInput['handleStepChange']>) => nativeElement.value?.handleStepChange(...args);
+const callHandleValueChange = (...args: Parameters<SynInput['handleValueChange']>) => nativeElement.value?.handleValueChange(...args);
 /**
 * Sets focus on the input.
  */
-const callFocus = (...args: Parameters<SynInput['focus']>) => element.value?.focus(...args);
+const callFocus = (...args: Parameters<SynInput['focus']>) => nativeElement.value?.focus(...args);
 /**
 * Removes focus from the input.
  */
-const callBlur = (...args: Parameters<SynInput['blur']>) => element.value?.blur(...args);
+const callBlur = (...args: Parameters<SynInput['blur']>) => nativeElement.value?.blur(...args);
 /**
 * Selects all the text in the input.
  */
-const callSelect = (...args: Parameters<SynInput['select']>) => element.value?.select(...args);
+const callSelect = (...args: Parameters<SynInput['select']>) => nativeElement.value?.select(...args);
 /**
 * Sets the start and end positions of the text selection (0-based).
  */
-const callSetSelectionRange = (...args: Parameters<SynInput['setSelectionRange']>) => element.value?.setSelectionRange(...args);
+const callSetSelectionRange = (...args: Parameters<SynInput['setSelectionRange']>) => nativeElement.value?.setSelectionRange(...args);
 /**
 * Replaces a range of text with a new string.
  */
-const callSetRangeText = (...args: Parameters<SynInput['setRangeText']>) => element.value?.setRangeText(...args);
+const callSetRangeText = (...args: Parameters<SynInput['setRangeText']>) => nativeElement.value?.setRangeText(...args);
 /**
 * Displays the browser picker for an input element (only works if the browser supports it for the input type).
  */
-const callShowPicker = (...args: Parameters<SynInput['showPicker']>) => element.value?.showPicker(...args);
+const callShowPicker = (...args: Parameters<SynInput['showPicker']>) => nativeElement.value?.showPicker(...args);
 /**
 * Increments the value of a numeric input type by the value of the step attribute.
  */
-const callStepUp = (...args: Parameters<SynInput['stepUp']>) => element.value?.stepUp(...args);
+const callStepUp = (...args: Parameters<SynInput['stepUp']>) => nativeElement.value?.stepUp(...args);
 /**
 * Decrements the value of a numeric input type by the value of the step attribute.
  */
-const callStepDown = (...args: Parameters<SynInput['stepDown']>) => element.value?.stepDown(...args);
+const callStepDown = (...args: Parameters<SynInput['stepDown']>) => nativeElement.value?.stepDown(...args);
 /**
 * Checks for validity but does not show a validation message.
 * Returns `true` when valid and `false` when invalid.
  */
-const callCheckValidity = (...args: Parameters<SynInput['checkValidity']>) => element.value?.checkValidity(...args);
+const callCheckValidity = (...args: Parameters<SynInput['checkValidity']>) => nativeElement.value?.checkValidity(...args);
 /**
 * Gets the associated form, if one exists.
  */
-const callGetForm = (...args: Parameters<SynInput['getForm']>) => element.value?.getForm(...args);
+const callGetForm = (...args: Parameters<SynInput['getForm']>) => nativeElement.value?.getForm(...args);
 /**
 * Checks for validity and shows the browser's validation message if the control is invalid.
  */
-const callReportValidity = (...args: Parameters<SynInput['reportValidity']>) => element.value?.reportValidity(...args);
+const callReportValidity = (...args: Parameters<SynInput['reportValidity']>) => nativeElement.value?.reportValidity(...args);
 /**
 * Sets a custom validation message.
 * Pass an empty string to restore validity.
  */
-const callSetCustomValidity = (...args: Parameters<SynInput['setCustomValidity']>) => element.value?.setCustomValidity(...args);
+const callSetCustomValidity = (...args: Parameters<SynInput['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
 
 defineExpose({
   callHandleDisabledChange,
@@ -127,6 +127,7 @@ defineExpose({
   callGetForm,
   callReportValidity,
   callSetCustomValidity,
+  nativeElement,
 });
 
 // Map attributes
@@ -358,7 +359,7 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
 <template>
   <syn-input
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     :value="typeof props.modelValue !== 'undefined' ? props.modelValue : typeof props.value !== 'undefined' ? props.value : undefined"
     @syn-blur="$emit('syn-blur', $event)"
     @syn-change="$emit('syn-change', $event)"
@@ -367,14 +368,6 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
     @syn-input="$emit('update:modelValue', $event.target.value); $emit('syn-input', $event)"
     @syn-invalid="$emit('syn-invalid', $event)"
   >
-    <slot name="label" />
-    <slot name="prefix" />
-    <slot name="suffix" />
-    <slot name="clear-icon" />
-    <slot name="show-password-icon" />
-    <slot name="hide-password-icon" />
-    <slot name="help-text" />
-    <slot name="increment-number-stepper" />
-    <slot name="decrement-number-stepper" />
+    <slot />
   </syn-input>
 </template>

package/src/components/SynVueMenu.vue

@@ -21,12 +21,13 @@ import '@synergy-design-system/components/components/menu/menu.js';
 import type { SynMenu, SynSelectEvent } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynMenu>();
+const nativeElement = ref<SynMenu>();
 
 // Map methods
 
 defineExpose({
 
+  nativeElement,
 });
 
 // Map attributes
@@ -61,7 +62,7 @@ export type { SynSelectEvent } from '@synergy-design-system/components';
   <syn-menu
     v-bind="visibleProps"
 
-    ref="element"
+    ref="nativeElement"
     @syn-select="$emit('syn-select', $event)"
   >
     <slot />

package/src/components/SynVueMenuItem.vue

@@ -37,17 +37,17 @@ import '@synergy-design-system/components/components/menu-item/menu-item.js';
 import type { SynMenuItem } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynMenuItem>();
+const nativeElement = ref<SynMenuItem>();
 
 // Map methods
-const callHandleCheckedChange = (...args: Parameters<SynMenuItem['handleCheckedChange']>) => element.value?.handleCheckedChange(...args);
-const callHandleDisabledChange = (...args: Parameters<SynMenuItem['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
-const callHandleTypeChange = (...args: Parameters<SynMenuItem['handleTypeChange']>) => element.value?.handleTypeChange(...args);
+const callHandleCheckedChange = (...args: Parameters<SynMenuItem['handleCheckedChange']>) => nativeElement.value?.handleCheckedChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynMenuItem['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
+const callHandleTypeChange = (...args: Parameters<SynMenuItem['handleTypeChange']>) => nativeElement.value?.handleTypeChange(...args);
 /**
 * Returns a text label based on the contents of the menu item's default slot.
  */
-const callGetTextLabel = (...args: Parameters<SynMenuItem['getTextLabel']>) => element.value?.getTextLabel(...args);
-const callIsSubmenu = (...args: Parameters<SynMenuItem['isSubmenu']>) => element.value?.isSubmenu(...args);
+const callGetTextLabel = (...args: Parameters<SynMenuItem['getTextLabel']>) => nativeElement.value?.getTextLabel(...args);
+const callIsSubmenu = (...args: Parameters<SynMenuItem['isSubmenu']>) => nativeElement.value?.isSubmenu(...args);
 
 defineExpose({
   callHandleCheckedChange,
@@ -55,6 +55,7 @@ defineExpose({
   callHandleTypeChange,
   callGetTextLabel,
   callIsSubmenu,
+  nativeElement,
 });
 
 // Map attributes
@@ -107,11 +108,8 @@ defineEmits<{
   <syn-menu-item
 
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
   >
     <slot />
-    <slot name="prefix" />
-    <slot name="suffix" />
-    <slot name="submenu" />
   </syn-menu-item>
 </template>

package/src/components/SynVueMenuLabel.vue

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

package/src/components/SynVueNavItem.vue

@@ -58,28 +58,29 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynNavItem>();
+const nativeElement = ref<SynNavItem>();
 
 // Map methods
-const callHandleOpenChange = (...args: Parameters<SynNavItem['handleOpenChange']>) => element.value?.handleOpenChange(...args);
+const callHandleOpenChange = (...args: Parameters<SynNavItem['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
 /**
 * Removes focus from the button.
  */
-const callBlur = (...args: Parameters<SynNavItem['blur']>) => element.value?.blur(...args);
+const callBlur = (...args: Parameters<SynNavItem['blur']>) => nativeElement.value?.blur(...args);
 /**
 * Simulates a click on the nav-items button, link or summary.
  */
-const callClick = (...args: Parameters<SynNavItem['click']>) => element.value?.click(...args);
+const callClick = (...args: Parameters<SynNavItem['click']>) => nativeElement.value?.click(...args);
 /**
 * Sets focus on the nav-item
  */
-const callFocus = (...args: Parameters<SynNavItem['focus']>) => element.value?.focus(...args);
+const callFocus = (...args: Parameters<SynNavItem['focus']>) => nativeElement.value?.focus(...args);
 
 defineExpose({
   callHandleOpenChange,
   callBlur,
   callClick,
   callFocus,
+  nativeElement,
 });
 
 // Map attributes
@@ -168,7 +169,7 @@ export type { SynFocusEvent } from '@synergy-design-system/components';
 <template>
   <syn-nav-item
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     @syn-show="$emit('syn-show', $event)"
     @syn-hide="$emit('syn-hide', $event)"
 
@@ -176,8 +177,5 @@ export type { SynFocusEvent } from '@synergy-design-system/components';
     @syn-focus="$emit('syn-focus', $event)"
   >
     <slot />
-    <slot name="prefix" />
-    <slot name="suffix" />
-    <slot name="children" />
   </syn-nav-item>
 </template>

package/src/components/SynVueOptgroup.vue

@@ -33,13 +33,14 @@ import '@synergy-design-system/components/components/optgroup/optgroup.js';
 import type { SynOptgroup } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynOptgroup>();
+const nativeElement = ref<SynOptgroup>();
 
 // Map methods
-const callHandleDisabledChange = (...args: Parameters<SynOptgroup['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynOptgroup['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
 
 defineExpose({
   callHandleDisabledChange,
+  nativeElement,
 });
 
 // Map attributes
@@ -76,11 +77,8 @@ defineEmits<{
   <syn-optgroup
 
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
   >
     <slot />
-    <slot name="prefix" />
-    <slot name="label" />
-    <slot name="suffix" />
   </syn-optgroup>
 </template>

package/src/components/SynVueOption.vue

@@ -29,22 +29,23 @@ import '@synergy-design-system/components/components/option/option.js';
 import type { SynOption } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynOption>();
+const nativeElement = ref<SynOption>();
 
 // Map methods
-const callHandleDisabledChange = (...args: Parameters<SynOption['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
-const callHandleSelectedChange = (...args: Parameters<SynOption['handleSelectedChange']>) => element.value?.handleSelectedChange(...args);
-const callHandleValueChange = (...args: Parameters<SynOption['handleValueChange']>) => element.value?.handleValueChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynOption['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
+const callHandleSelectedChange = (...args: Parameters<SynOption['handleSelectedChange']>) => nativeElement.value?.handleSelectedChange(...args);
+const callHandleValueChange = (...args: Parameters<SynOption['handleValueChange']>) => nativeElement.value?.handleValueChange(...args);
 /**
 * Returns a plain text label based on the option's content.
  */
-const callGetTextLabel = (...args: Parameters<SynOption['getTextLabel']>) => element.value?.getTextLabel(...args);
+const callGetTextLabel = (...args: Parameters<SynOption['getTextLabel']>) => nativeElement.value?.getTextLabel(...args);
 
 defineExpose({
   callHandleDisabledChange,
   callHandleSelectedChange,
   callHandleValueChange,
   callGetTextLabel,
+  nativeElement,
 });
 
 // Map attributes
@@ -85,10 +86,8 @@ defineEmits<{
   <syn-option
 
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
   >
     <slot />
-    <slot name="prefix" />
-    <slot name="suffix" />
   </syn-option>
 </template>

package/src/components/SynVuePopup.vue

@@ -40,16 +40,17 @@ import '@synergy-design-system/components/components/popup/popup.js';
 import type { SynPopup, SynRepositionEvent } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynPopup>();
+const nativeElement = ref<SynPopup>();
 
 // Map methods
 /**
 * Forces the popup to recalculate and reposition itself.
  */
-const callReposition = (...args: Parameters<SynPopup['reposition']>) => element.value?.reposition(...args);
+const callReposition = (...args: Parameters<SynPopup['reposition']>) => nativeElement.value?.reposition(...args);
 
 defineExpose({
   callReposition,
+  nativeElement,
 });
 
 // Map attributes
@@ -239,10 +240,9 @@ export type { SynRepositionEvent } from '@synergy-design-system/components';
   <syn-popup
     v-bind="visibleProps"
 
-    ref="element"
+    ref="nativeElement"
     @syn-reposition="$emit('syn-reposition', $event)"
   >
     <slot />
-    <slot name="anchor" />
   </syn-popup>
 </template>

package/src/components/SynVuePrioNav.vue

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

package/src/components/SynVueProgressBar.vue

@@ -29,12 +29,13 @@ import '@synergy-design-system/components/components/progress-bar/progress-bar.j
 import type { SynProgressBar } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynProgressBar>();
+const nativeElement = ref<SynProgressBar>();
 
 // Map methods
 
 defineExpose({
 
+  nativeElement,
 });
 
 // Map attributes
@@ -75,7 +76,7 @@ defineEmits<{
   <syn-progress-bar
 
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
   >
     <slot />
   </syn-progress-bar>

package/src/components/SynVueProgressRing.vue

@@ -29,12 +29,13 @@ import '@synergy-design-system/components/components/progress-ring/progress-ring
 import type { SynProgressRing } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynProgressRing>();
+const nativeElement = ref<SynProgressRing>();
 
 // Map methods
 
 defineExpose({
 
+  nativeElement,
 });
 
 // Map attributes
@@ -70,7 +71,7 @@ defineEmits<{
   <syn-progress-ring
 
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
   >
     <slot />
   </syn-progress-ring>

package/src/components/SynVueRadio.vue

@@ -30,15 +30,16 @@ import '@synergy-design-system/components/components/radio/radio.js';
 import type { SynBlurEvent, SynFocusEvent, SynRadio } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynRadio>();
+const nativeElement = ref<SynRadio>();
 
 // Map methods
-const callHandleCheckedChange = (...args: Parameters<SynRadio['handleCheckedChange']>) => element.value?.handleCheckedChange(...args);
-const callHandleDisabledChange = (...args: Parameters<SynRadio['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
+const callHandleCheckedChange = (...args: Parameters<SynRadio['handleCheckedChange']>) => nativeElement.value?.handleCheckedChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynRadio['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
 
 defineExpose({
   callHandleCheckedChange,
   callHandleDisabledChange,
+  nativeElement,
 });
 
 // Map attributes
@@ -94,7 +95,7 @@ export type { SynFocusEvent } from '@synergy-design-system/components';
 <template>
   <syn-radio
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
 
     @syn-blur="$emit('syn-blur', $event)"
     @syn-focus="$emit('syn-focus', $event)"

package/src/components/SynVueRadioButton.vue

@@ -31,23 +31,24 @@ import '@synergy-design-system/components/components/radio-button/radio-button.j
 import type { SynBlurEvent, SynFocusEvent, SynRadioButton } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynRadioButton>();
+const nativeElement = ref<SynRadioButton>();
 
 // Map methods
-const callHandleDisabledChange = (...args: Parameters<SynRadioButton['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynRadioButton['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
 /**
 * Sets focus on the radio button.
  */
-const callFocus = (...args: Parameters<SynRadioButton['focus']>) => element.value?.focus(...args);
+const callFocus = (...args: Parameters<SynRadioButton['focus']>) => nativeElement.value?.focus(...args);
 /**
 * Removes focus from the radio button.
  */
-const callBlur = (...args: Parameters<SynRadioButton['blur']>) => element.value?.blur(...args);
+const callBlur = (...args: Parameters<SynRadioButton['blur']>) => nativeElement.value?.blur(...args);
 
 defineExpose({
   callHandleDisabledChange,
   callFocus,
   callBlur,
+  nativeElement,
 });
 
 // Map attributes
@@ -103,13 +104,11 @@ export type { SynFocusEvent } from '@synergy-design-system/components';
 <template>
   <syn-radio-button
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
 
     @syn-blur="$emit('syn-blur', $event)"
     @syn-focus="$emit('syn-focus', $event)"
   >
     <slot />
-    <slot name="prefix" />
-    <slot name="suffix" />
   </syn-radio-button>
 </template>

package/src/components/SynVueRadioGroup.vue

@@ -37,29 +37,29 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynRadioGroup>();
+const nativeElement = ref<SynRadioGroup>();
 
 // Map methods
-const callHandleSizeChange = (...args: Parameters<SynRadioGroup['handleSizeChange']>) => element.value?.handleSizeChange(...args);
-const callHandleValueChange = (...args: Parameters<SynRadioGroup['handleValueChange']>) => element.value?.handleValueChange(...args);
+const callHandleSizeChange = (...args: Parameters<SynRadioGroup['handleSizeChange']>) => nativeElement.value?.handleSizeChange(...args);
+const callHandleValueChange = (...args: Parameters<SynRadioGroup['handleValueChange']>) => nativeElement.value?.handleValueChange(...args);
 /**
 * Checks for validity but does not show a validation message.
 * Returns `true` when valid and `false` when invalid.
  */
-const callCheckValidity = (...args: Parameters<SynRadioGroup['checkValidity']>) => element.value?.checkValidity(...args);
+const callCheckValidity = (...args: Parameters<SynRadioGroup['checkValidity']>) => nativeElement.value?.checkValidity(...args);
 /**
 * Gets the associated form, if one exists.
  */
-const callGetForm = (...args: Parameters<SynRadioGroup['getForm']>) => element.value?.getForm(...args);
+const callGetForm = (...args: Parameters<SynRadioGroup['getForm']>) => nativeElement.value?.getForm(...args);
 /**
 * Checks for validity and shows the browser's validation message if the control is invalid.
  */
-const callReportValidity = (...args: Parameters<SynRadioGroup['reportValidity']>) => element.value?.reportValidity(...args);
+const callReportValidity = (...args: Parameters<SynRadioGroup['reportValidity']>) => nativeElement.value?.reportValidity(...args);
 /**
 * Sets a custom validation message.
 * Pass an empty string to restore validity.
  */
-const callSetCustomValidity = (...args: Parameters<SynRadioGroup['setCustomValidity']>) => element.value?.setCustomValidity(...args);
+const callSetCustomValidity = (...args: Parameters<SynRadioGroup['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
 
 defineExpose({
   callHandleSizeChange,
@@ -68,6 +68,7 @@ defineExpose({
   callGetForm,
   callReportValidity,
   callSetCustomValidity,
+  nativeElement,
 });
 
 // Map attributes
@@ -165,14 +166,12 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
 <template>
   <syn-radio-group
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     :value="typeof props.modelValue !== 'undefined' ? props.modelValue : typeof props.value !== 'undefined' ? props.value : undefined"
     @syn-change="$emit('syn-change', $event)"
     @syn-input="$emit('update:modelValue', $event.target.value); $emit('syn-input', $event)"
     @syn-invalid="$emit('syn-invalid', $event)"
   >
     <slot />
-    <slot name="label" />
-    <slot name="help-text" />
   </syn-radio-group>
 </template>