@synergy-design-system/vue 1.27.0 → 2.1.0

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

@@ -0,0 +1,40 @@
+import '@synergy-design-system/components/components/tab-panel/tab-panel.js';
+import type { SynTabPanel } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * The tab panel's name.
+   */
+    name?: string | undefined;
+    /**
+  * When true, the tab panel will be shown.
+   */
+    active?: boolean | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynTabPanel | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * The tab panel's name.
+   */
+    name?: string | undefined;
+    /**
+  * When true, the tab panel will be shown.
+   */
+    active?: boolean | undefined;
+}>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -105,113 +105,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     modelValue?: string | undefined;
 }>, {
-    callHandleDisabledChange: () => void | undefined;
-    callHandleRowsChange: () => void | undefined;
-    callHandleValueChange: () => Promise<void> | undefined;
-    callFocus: (options?: FocusOptions | undefined) => void | undefined;
-    callBlur: () => void | undefined;
-    callSelect: () => void | undefined;
-    callScrollPosition: (position?: {
-        /**
-         * @summary Textareas collect data from the user and allow multiple lines of text.
-         * @documentation https://synergy.style/components/textarea
-         * @status stable
-         * @since 2.0
-         *
-         * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
-         * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-         *
-         * @event syn-blur - Emitted when the control loses focus.
-         * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
-         * @event syn-focus - Emitted when the control gains focus.
-         * @event syn-input - Emitted when the control receives input.
-         * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-         *
-         * @csspart form-control - The form control that wraps the label, input, and help text.
-         * @csspart form-control-label - The label's wrapper.
-         * @csspart form-control-input - The input's wrapper.
-         * @csspart form-control-help-text - The help text's wrapper.
-         * @csspart base - The component's base wrapper.
-         * @csspart textarea - The internal `<textarea>` control.
-         */
-        top?: number | undefined;
-        /**
-         * @summary Textareas collect data from the user and allow multiple lines of text.
-         * @documentation https://synergy.style/components/textarea
-         * @status stable
-         * @since 2.0
-         *
-         * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
-         * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-         *
-         * @event syn-blur - Emitted when the control loses focus.
-         * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
-         * @event syn-focus - Emitted when the control gains focus.
-         * @event syn-input - Emitted when the control receives input.
-         * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-         *
-         * @csspart form-control - The form control that wraps the label, input, and help text.
-         * @csspart form-control-label - The label's wrapper.
-         * @csspart form-control-input - The input's wrapper.
-         * @csspart form-control-help-text - The help text's wrapper.
-         * @csspart base - The component's base wrapper.
-         * @csspart textarea - The internal `<textarea>` control.
-         */
-        left?: number | undefined;
-    } | undefined) => {
-        /**
-         * @summary Textareas collect data from the user and allow multiple lines of text.
-         * @documentation https://synergy.style/components/textarea
-         * @status stable
-         * @since 2.0
-         *
-         * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
-         * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-         *
-         * @event syn-blur - Emitted when the control loses focus.
-         * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
-         * @event syn-focus - Emitted when the control gains focus.
-         * @event syn-input - Emitted when the control receives input.
-         * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-         *
-         * @csspart form-control - The form control that wraps the label, input, and help text.
-         * @csspart form-control-label - The label's wrapper.
-         * @csspart form-control-input - The input's wrapper.
-         * @csspart form-control-help-text - The help text's wrapper.
-         * @csspart base - The component's base wrapper.
-         * @csspart textarea - The internal `<textarea>` control.
-         */
-        top: number;
-        /**
-         * @summary Textareas collect data from the user and allow multiple lines of text.
-         * @documentation https://synergy.style/components/textarea
-         * @status stable
-         * @since 2.0
-         *
-         * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
-         * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-         *
-         * @event syn-blur - Emitted when the control loses focus.
-         * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
-         * @event syn-focus - Emitted when the control gains focus.
-         * @event syn-input - Emitted when the control receives input.
-         * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-         *
-         * @csspart form-control - The form control that wraps the label, input, and help text.
-         * @csspart form-control-label - The label's wrapper.
-         * @csspart form-control-input - The input's wrapper.
-         * @csspart form-control-help-text - The help text's wrapper.
-         * @csspart base - The component's base wrapper.
-         * @csspart textarea - The internal `<textarea>` control.
-         */
-        left: number;
-    } | 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;
-    callCheckValidity: () => boolean | undefined;
-    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;

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

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

package/dist/index.d.ts

@@ -31,6 +31,9 @@ export { default as SynVueSelect } from "./components/SynVueSelect.vue";
 export { default as SynVueSideNav } from "./components/SynVueSideNav.vue";
 export { default as SynVueSpinner } from "./components/SynVueSpinner.vue";
 export { default as SynVueSwitch } from "./components/SynVueSwitch.vue";
+export { default as SynVueTab } from "./components/SynVueTab.vue";
+export { default as SynVueTabGroup } from "./components/SynVueTabGroup.vue";
+export { default as SynVueTabPanel } from "./components/SynVueTabPanel.vue";
 export { default as SynVueTag } from "./components/SynVueTag.vue";
 export { default as SynVueTextarea } from "./components/SynVueTextarea.vue";
 export { default as SynVueTooltip } from "./components/SynVueTooltip.vue";

package/package.json

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

package/src/components/SynVueAlert.vue

@@ -40,33 +40,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynAlert>();
 
-// Map methods
-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']>) => nativeElement.value?.show(...args);
-/**
-* Hides the alert
- */
-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
-dismissed, it will be removed from the DOM completely.
-* By storing a reference to the alert, you can reuse it by
-calling this method again.
-* The returned promise will resolve after the alert is hidden.
- */
-const callToast = (...args: Parameters<SynAlert['toast']>) => nativeElement.value?.toast(...args);
-
 defineExpose({
-  callHandleOpenChange,
-  callHandleDurationChange,
-  callShow,
-  callHide,
-  callToast,
   nativeElement,
 });
 

package/src/components/SynVueBadge.vue

@@ -23,10 +23,7 @@ import type { SynBadge } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynBadge>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 

package/src/components/SynVueBreadcrumb.vue

@@ -26,10 +26,7 @@ import type { SynBreadcrumb } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynBreadcrumb>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 

package/src/components/SynVueBreadcrumbItem.vue

@@ -31,13 +31,7 @@ import type { SynBreadcrumbItem } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynBreadcrumbItem>();
 
-// Map methods
-const callHrefChanged = (...args: Parameters<SynBreadcrumbItem['hrefChanged']>) => nativeElement.value?.hrefChanged(...args);
-const callHandleSlotChange = (...args: Parameters<SynBreadcrumbItem['handleSlotChange']>) => nativeElement.value?.handleSlotChange(...args);
-
 defineExpose({
-  callHrefChanged,
-  callHandleSlotChange,
   nativeElement,
 });
 

package/src/components/SynVueButton.vue

@@ -39,48 +39,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynButton>();
 
-// Map methods
-const callHandleDisabledChange = (...args: Parameters<SynButton['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-/**
-* Simulates a click on the button.
- */
-const callClick = (...args: Parameters<SynButton['click']>) => nativeElement.value?.click(...args);
-/**
-* Sets focus on the button.
- */
-const callFocus = (...args: Parameters<SynButton['focus']>) => nativeElement.value?.focus(...args);
-/**
-* Removes focus from the button.
- */
-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']>) => nativeElement.value?.checkValidity(...args);
-/**
-* Gets the associated form, if one exists.
- */
-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']>) => nativeElement.value?.reportValidity(...args);
-/**
-* Sets a custom validation message.
-* Pass an empty string to restore validity.
- */
-const callSetCustomValidity = (...args: Parameters<SynButton['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
-
 defineExpose({
-  callHandleDisabledChange,
-  callClick,
-  callFocus,
-  callBlur,
-  callCheckValidity,
-  callGetForm,
-  callReportValidity,
-  callSetCustomValidity,
   nativeElement,
 });
 

package/src/components/SynVueButtonGroup.vue

@@ -23,10 +23,7 @@ import type { SynButtonGroup } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynButtonGroup>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 

package/src/components/SynVueCard.vue

@@ -35,20 +35,18 @@ import type { SynCard } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynCard>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 
 // Map attributes
 const props = defineProps<{
   /**
-* 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'?: SynCard['nested'];
+  'sharp'?: SynCard['sharp'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.

package/src/components/SynVueCheckbox.vue

@@ -41,52 +41,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynCheckbox>();
 
-// Map methods
-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']>) => nativeElement.value?.click(...args);
-/**
-* Sets focus on the checkbox.
- */
-const callFocus = (...args: Parameters<SynCheckbox['focus']>) => nativeElement.value?.focus(...args);
-/**
-* Removes focus from the checkbox.
- */
-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']>) => nativeElement.value?.checkValidity(...args);
-/**
-* Gets the associated form, if one exists.
- */
-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']>) => 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']>) => nativeElement.value?.setCustomValidity(...args);
-
 defineExpose({
-  callHandleDisabledChange,
-  callHandleStateChange,
-  callClick,
-  callFocus,
-  callBlur,
-  callCheckValidity,
-  callGetForm,
-  callReportValidity,
-  callSetCustomValidity,
   nativeElement,
 });
 

package/src/components/SynVueDialog.vue

@@ -65,21 +65,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynDialog>();
 
-// Map methods
-const callHandleOpenChange = (...args: Parameters<SynDialog['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
-/**
-* Shows the dialog.
- */
-const callShow = (...args: Parameters<SynDialog['show']>) => nativeElement.value?.show(...args);
-/**
-* Hides the dialog
- */
-const callHide = (...args: Parameters<SynDialog['hide']>) => nativeElement.value?.hide(...args);
-
 defineExpose({
-  callHandleOpenChange,
-  callShow,
-  callHide,
   nativeElement,
 });
 

package/src/components/SynVueDivider.vue

@@ -23,11 +23,7 @@ import type { SynDivider } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynDivider>();
 
-// Map methods
-const callHandleVerticalChange = (...args: Parameters<SynDivider['handleVerticalChange']>) => nativeElement.value?.handleVerticalChange(...args);
-
 defineExpose({
-  callHandleVerticalChange,
   nativeElement,
 });
 

package/src/components/SynVueDrawer.vue

@@ -72,23 +72,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynDrawer>();
 
-// Map methods
-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']>) => nativeElement.value?.show(...args);
-/**
-* Hides the drawer
- */
-const callHide = (...args: Parameters<SynDrawer['hide']>) => nativeElement.value?.hide(...args);
-
 defineExpose({
-  callHandleOpenChange,
-  callHandleNoModalChange,
-  callShow,
-  callHide,
   nativeElement,
 });
 

package/src/components/SynVueDropdown.vue

@@ -38,46 +38,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynDropdown>();
 
-// Map methods
-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']>) => nativeElement.value?.show(...args);
-/**
-* Hides the dropdown panel
- */
-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']>) => 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,
-  callGetMenu,
-  callHandleTriggerClick,
-  callHandleTriggerKeyDown,
-  callHandleTriggerKeyUp,
-  callHandleTriggerSlotChange,
-  callUpdateAccessibleTrigger,
-  callShow,
-  callHide,
-  callReposition,
-  callAddOpenListeners,
-  callRemoveOpenListeners,
-  callHandleOpenChange,
   nativeElement,
 });
 

package/src/components/SynVueHeader.vue

@@ -13,18 +13,21 @@
  * @status stable
  * @since 1.10.0
  *
- * @slot - The label for the header.
- * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided.
- * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons.
+ * @slot label - The label for the header
+ * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided
+ * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons
  *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`
  * @slot navigation - This slot can be used to add an optional horizontal navigation
- * @slot show-burger-menu - An icon to use in lieu of the default show burger menu icon
- * @slot hide-burger-menu - An icon to use in lieu of the default hide burger menu icon
+ * @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.
+ *                      The default close icon is a 'x'.
+ * @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.
+ *                      The default open icon is a burger menu.
  *
- * @event syn-burger-menu-show - Emitted when the burger menu button is toggled to visible
- * @event syn-burger-menu-hide - Emitted when the burger menu button is toggled to not visible
+ * @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed
+ * @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden
+ * @event syn-burger-menu-open - Emitted when the burger menu is toggled to open
  *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's base wrapper
  * @csspart content - The wrapper most content items reside
  * @csspart logo - The wrapper the application logo resides in
  * @csspart label - The element wrapping the application name
@@ -35,25 +38,14 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/header/header.js';
 
-import type { SynBurgerMenuHideEvent, SynBurgerMenuShowEvent, SynHeader } from '@synergy-design-system/components';
+import type {
+  SynBurgerMenuClosedEvent, SynBurgerMenuHiddenEvent, SynBurgerMenuOpenEvent, SynHeader,
+} from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynHeader>();
 
-// Map methods
-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.
-
-If no side navigation is connected, the header will use the first `syn-side-nav` element it
-finds.
- */
-const callConnectSideNavigation = (...args: Parameters<SynHeader['connectSideNavigation']>) => nativeElement.value?.connectSideNavigation(...args);
-
 defineExpose({
-  callHandleBurgerMenuVisible,
-  callConnectSideNavigation,
   nativeElement,
 });
 
@@ -61,20 +53,19 @@ defineExpose({
 const props = defineProps<{
   /**
 * 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'?: SynHeader['label'];
 
   /**
-* 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'?: SynHeader['showBurgerMenu'];
-
-  /**
-* 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'?: SynHeader['burgerMenuVisible'];
+  'burgerMenu'?: SynHeader['burgerMenu'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.
@@ -90,29 +81,36 @@ const visibleProps = computed(() => Object.fromEntries(
 // Map events
 defineEmits<{
   /**
-* Emitted when the burger menu button is toggled to visible
+* Emitted when the burger menu is toggled to closed
+ */
+  'syn-burger-menu-closed': [e: SynBurgerMenuClosedEvent];
+
+  /**
+* Emitted when the burger menu is toggled to hidden
  */
-  'syn-burger-menu-show': [e: SynBurgerMenuShowEvent];
+  'syn-burger-menu-hidden': [e: SynBurgerMenuHiddenEvent];
 
   /**
-* Emitted when the burger menu button is toggled to not visible
+* Emitted when the burger menu is toggled to open
  */
-  'syn-burger-menu-hide': [e: SynBurgerMenuHideEvent];
+  'syn-burger-menu-open': [e: SynBurgerMenuOpenEvent];
 }>();
 </script>
 
 <script lang="ts">
-export type { SynBurgerMenuShowEvent } from '@synergy-design-system/components';
-export type { SynBurgerMenuHideEvent } 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';
 </script>
 
 <template>
   <syn-header
     v-bind="visibleProps"
     ref="nativeElement"
+    @syn-burger-menu-closed="$emit('syn-burger-menu-closed', $event)"
 
-    @syn-burger-menu-show="$emit('syn-burger-menu-show', $event)"
-    @syn-burger-menu-hide="$emit('syn-burger-menu-hide', $event)"
+    @syn-burger-menu-hidden="$emit('syn-burger-menu-hidden', $event)"
+    @syn-burger-menu-open="$emit('syn-burger-menu-open', $event)"
   >
     <slot />
   </syn-header>