@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/full/component/component:syn-header/angular/header.component.ts

@@ -0,0 +1,149 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  Output,
+  EventEmitter,
+  AfterContentInit,
+} from '@angular/core';
+import type { SynHeader } from '@synergy-design-system/components';
+import type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
+import type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
+import type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';
+import '@synergy-design-system/components/components/header/header.js';
+
+/**
+ * @summary The <syn-header /> element provides a generic application header
+ * that can be used to add applications name, toolbar and primary navigation.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs
+ * @status stable
+ * @since 1.10.0
+ *
+ * @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 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-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 content - The wrapper most content items reside
+ * @csspart logo - The wrapper the application logo resides in
+ * @csspart label - The element wrapping the application name
+ * @csspart meta-navigation - The Item wrapping the optional application menu
+ * @csspart navigation - The wrapper that is holding the optional top navigation section
+ * @csspart burger-menu-toggle-button - The button that toggles the burger menu
+ *
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
+ */
+@Component({
+  selector: 'syn-header',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynHeaderComponent {
+  public nativeElement: SynHeader;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+    this.nativeElement.addEventListener(
+      'syn-burger-menu-closed',
+      (e: SynBurgerMenuClosedEvent) => {
+        this.synBurgerMenuClosedEvent.emit(e);
+      },
+    );
+    this.nativeElement.addEventListener(
+      'syn-burger-menu-hidden',
+      (e: SynBurgerMenuHiddenEvent) => {
+        this.synBurgerMenuHiddenEvent.emit(e);
+      },
+    );
+    this.nativeElement.addEventListener(
+      'syn-burger-menu-open',
+      (e: SynBurgerMenuOpenEvent) => {
+        this.synBurgerMenuOpenEvent.emit(e);
+      },
+    );
+  }
+
+  /**
+   * The headers label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  @Input()
+  set label(v: SynHeader['label']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
+  }
+  get label(): SynHeader['label'] {
+    return this.nativeElement.label;
+  }
+
+  /**
+* 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
+variant="default".
+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
+ */
+  @Input()
+  set burgerMenu(v: SynHeader['burgerMenu']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.burgerMenu = v));
+  }
+  get burgerMenu(): SynHeader['burgerMenu'] {
+    return this.nativeElement.burgerMenu;
+  }
+
+  /**
+* Makes the header stick to the top of the viewport when scrolling.
+Also applies a shadow to the header when scrolling.
+ */
+  @Input()
+  set sticky(v: '' | SynHeader['sticky']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.sticky = v === '' || v),
+    );
+  }
+  get sticky(): SynHeader['sticky'] {
+    return this.nativeElement.sticky;
+  }
+
+  /**
+   * Emitted when the burger menu is toggled to closed
+   */
+  @Output() synBurgerMenuClosedEvent =
+    new EventEmitter<SynBurgerMenuClosedEvent>();
+
+  /**
+   * Emitted when the burger menu is toggled to hidden
+   */
+  @Output() synBurgerMenuHiddenEvent =
+    new EventEmitter<SynBurgerMenuHiddenEvent>();
+
+  /**
+   * Emitted when the burger menu is toggled to open
+   */
+  @Output() synBurgerMenuOpenEvent = new EventEmitter<SynBurgerMenuOpenEvent>();
+}
+
+export type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
+export type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
+export type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';

package/data/layers/full/component/component:syn-header/components/header.component.ts

@@ -0,0 +1,310 @@
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit/static-html.js';
+import { property, query, state } from 'lit/decorators.js';
+import type { CSSResultGroup } from 'lit';
+import SynergyElement from '../../internal/synergy-element.js';
+import { HasSlotController } from '../../internal/slot.js';
+import componentStyles from '../../styles/component.styles.js';
+import styles from './header.styles.js';
+import SynIcon from '../icon/icon.component.js';
+import type SynSideNav from '../side-nav/side-nav.component.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import { watch } from '../../internal/watch.js';
+import type SynDivider from '../divider/divider.component.js';
+
+/**
+ * @summary The <syn-header /> element provides a generic application header
+ * that can be used to add applications name, toolbar and primary navigation.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs
+ * @status stable
+ * @since 1.10.0
+ *
+ * @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 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-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 content - The wrapper most content items reside
+ * @csspart logo - The wrapper the application logo resides in
+ * @csspart label - The element wrapping the application name
+ * @csspart meta-navigation - The Item wrapping the optional application menu
+ * @csspart navigation - The wrapper that is holding the optional top navigation section
+ * @csspart burger-menu-toggle-button - The button that toggles the burger menu
+ *
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
+ */
+export default class SynHeader extends SynergyElement {
+  static styles: CSSResultGroup = [
+    componentStyles,
+    styles,
+  ];
+
+  static dependencies = {
+    'syn-icon': SynIcon,
+  };
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'logo', 'label', 'meta-navigation', 'navigation');
+
+  private readonly localize = new LocalizeController(this);
+
+  /**
+   * Internal mutation observer
+   */
+  private mutationObserver: MutationObserver;
+
+  /*
+   * #587: If the side nav is animating, we should not allow to trigger the burger menu
+   */
+  private isSideNavAnimating = false;
+
+  @query('slot[name="meta-navigation"]') private metaNavigationSlot: HTMLSlotElement;
+
+  /**
+   * The headers label. If you need to display HTML, use the `label` slot instead.
+   */
+  @property() label = '';
+
+  /**
+   * 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
+   * variant="default".
+   * 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
+   */
+  @property({ attribute: 'burger-menu', reflect: true }) burgerMenu: 'hidden' | 'open' | 'closed' = 'hidden';
+
+  /**
+   * Makes the header stick to the top of the viewport when scrolling.
+   * Also applies a shadow to the header when scrolling.
+   */
+  @property({ reflect: true, type: Boolean }) sticky = false;
+
+  /**
+   * The side nav
+   */
+  @state() private sideNav: SynSideNav | null;
+
+  private toggleBurgerMenu() {
+    switch (this.burgerMenu) {
+      case 'closed': this.burgerMenu = 'open'; break;
+      case 'open': this.burgerMenu = 'closed'; break;
+      default: break;
+    }
+  }
+
+  private handleBurgerMenuToggle() {
+    // If there is a side-nav in variant="default", toggle the open state!
+    if (this.sideNav && this.sideNav.variant === 'default' && !this.isSideNavAnimating) {
+      this.sideNav.open = !this.sideNav.open;
+    }
+    if (!this.isSideNavAnimating) {
+      this.toggleBurgerMenu();
+    }
+  }
+
+  /**
+   * Automatically update the burger menu icon based
+   * on the state of the side-nav, if one is connected.
+   */
+  private updateBurgerMenuBasedOnSideNav() {
+    if (this.sideNav) {
+      // Hide the burger menu icon if the side-nav is not variant="default"
+      if (this.sideNav.variant !== 'default') {
+        this.burgerMenu = 'hidden';
+      } else {
+        this.burgerMenu = this.sideNav.open ? 'open' : 'closed';
+      }
+    }
+  }
+
+  /**
+   * #1130: Automatically set the correct styles for vertical syn-dividers in the meta navigation.
+   * Dividers may be slotted directly in the meta navigation or be nested in another element, e.g. a wrapper for the meta navigation.
+   * Horizontal dividers are not supported in the meta navigation and we don't want to override any styles for them that might be set by the user.
+   */
+  private updateMetaNavigation() {
+    const foundDividers: SynDivider[] = [];
+    this.metaNavigationSlot
+      // Get all slotted children.
+      // Needed because we may also have dividers in a wrapper that is used for the meta navigation
+      .assignedElements({ flatten: true })
+      .forEach(el => {
+        if (el.tagName.toLowerCase() === 'syn-divider') {
+          foundDividers.push(el as SynDivider);
+        } else {
+          const directChildDividers = el.querySelectorAll<SynDivider>(':scope > syn-divider');
+          if (directChildDividers.length) {
+            foundDividers.push(...directChildDividers);
+          }
+        }
+      });
+
+    // Set the correct styles for the found dividers
+    // - --spacing: var(--syn-spacing-x-small) makes the spacing slightly narrower,
+    // - align-self: center makes sure the divider is centered in the meta navigation,
+    // - height: var(--metanavigation-item-size) makes sure the divider has the same height as the other items in the meta navigation.
+    // We use this approach as it is faster than 3 separate style changes and we can be sure to not override any other styles that might be set on the divider.
+    const cssText = '--spacing: var(--syn-spacing-x-small); align-self: center; display: flex; height: var(--metanavigation-item-size);';
+
+    foundDividers
+      .filter(divider => divider.hasAttribute('vertical'))
+      .forEach(divider => {
+        // eslint-disable-next-line no-param-reassign
+        divider.style.cssText += cssText;
+      });
+  }
+
+  @watch('burgerMenu', { waitUntilFirstUpdate: true })
+  handleBurgerMenu() {
+    const myEvt: keyof GlobalEventHandlersEventMap = `syn-burger-menu-${this.burgerMenu}`;
+    this.emit(myEvt);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.mutationObserver = new MutationObserver(() => this.updateBurgerMenuBasedOnSideNav());
+  }
+
+  firstUpdated() {
+    // Search for a side-nav and use the first found in case of the connectSideNavigation method
+    // is not used by the user.
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.updateComplete.then(() => {
+      const sideNav = document.querySelector('syn-side-nav');
+      this.connectSideNavigation(sideNav);
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    //  Remove observer
+    this.mutationObserver.disconnect();
+  }
+
+  /**
+   * 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.
+   *
+   * @param sideNav The side navigation to connect to the header
+   */
+  connectSideNavigation(sideNav: SynSideNav | null) {
+    this.mutationObserver.disconnect();
+
+    this.sideNav = sideNav || document.querySelector('syn-side-nav');
+    if (this.sideNav) {
+      // Need to call the method initially, if the side-nav is not open on connect time.
+      // Otherwise the mutation observer won`t trigger the method.
+      this.updateBurgerMenuBasedOnSideNav();
+      this.mutationObserver.observe(this.sideNav, { attributeFilter: ['open', 'variant'], attributes: true });
+
+      // #587: Make sure to not trigger the burger menu if the side nav is currently
+      // animating and the user clicks on the burger menu button.
+
+      // #921: Make sure to only trigger this if the source of the element is the side nav.
+      // This is because syn-nav-item also triggers show and hide events when opened or closed.
+      const isAnimating = (e: Event) => {
+        if (e.target !== this.sideNav) {
+          return;
+        }
+        this.isSideNavAnimating = true;
+      };
+
+      const isNotAnimating = (e: Event) => {
+        if (e.target !== this.sideNav) {
+          return;
+        }
+        this.isSideNavAnimating = false;
+      };
+
+      this.sideNav.addEventListener('syn-show', isAnimating);
+      this.sideNav.addEventListener('syn-hide', isAnimating);
+      this.sideNav.addEventListener('syn-after-show', isNotAnimating);
+      this.sideNav.addEventListener('syn-after-hide', isNotAnimating);
+    }
+  }
+
+  render() {
+    /* eslint-disable @typescript-eslint/unbound-method */
+    const hasNavigation = this.hasSlotController.test('navigation');
+    const showBurgerMenu = this.burgerMenu !== 'hidden';
+    return html`
+      <header
+        class=${classMap({
+          header: true,
+          'header--has-burger-menu': showBurgerMenu,
+          'header--has-navigation': hasNavigation,
+        })}
+        part="base"
+      >
+        <!-- .header__content -->
+        <div part="content" class="header__content">
+
+          ${showBurgerMenu
+              ? html`
+                  <button
+                    aria-label=${this.localize.term(this.burgerMenu === 'closed' ? 'openMenu' : 'closeMenu')}
+                    class="header__burger-menu-toggle"
+                    @click=${this.handleBurgerMenuToggle}
+                    part="burger-menu-toggle-button"
+                    type="button"
+                  >
+                    ${this.burgerMenu === 'open'
+                      ? html`
+                          <slot name="open-burger-menu-icon">
+                            <syn-icon name="x-lg" library="system"></syn-icon>
+                          </slot>
+                        `
+                      : html`
+                          <slot name="closed-burger-menu-icon">
+                            <syn-icon name="menu" library="system"></syn-icon>
+                          </slot>
+                        `}
+                  </button>
+                `
+              : ''}
+
+          <div part="logo" class="header__logo">
+            <slot name="logo">
+              <syn-icon name="logo-color" library="system" label="SICK Sensor Intelligence"></syn-icon>
+            </slot>
+          </div>
+
+          <div part="label" class="header__label">
+            <slot name="label">
+              ${this.label}
+            </slot>
+          </div>
+
+          <div part="meta-navigation" class="header__meta-navigation">
+            <slot @slotchange=${this.updateMetaNavigation} name="meta-navigation"></slot>
+          </div>
+        </div>
+        <!-- /.header__content -->
+
+        <div part="navigation" class="header__navigation">
+          <slot name="navigation"></slot>
+        </div>
+      </header>
+    `;
+    /* eslint-enable @typescript-eslint/unbound-method */
+  }
+}

package/data/layers/full/component/component:syn-header/components/header.styles.ts

@@ -0,0 +1,143 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --sticky-position: 0;
+    --metanavigation-item-size: var(--syn-font-size-x-large);
+
+    display: block;
+  }
+
+  .header {
+    background: var(--syn-panel-background-color);
+    box-shadow: inset 0 -1px 0 0 var(--syn-header-border-color);
+  }
+
+  /**
+   * The primary content area displays one to many slotted items
+   * and contains the following items:
+   * - side nav state icon (OPTIONAL)
+   * - company or application logo
+   * - application name
+   * - meta-navigation
+   */
+  .header__content {
+    align-items: center;
+    box-sizing: content-box;
+    display: flex;
+    min-height: 40px;
+    padding: var(--syn-spacing-small) var(--syn-spacing-large);
+  }
+
+  /**
+   * The logo slot includes the application or company logo
+   */
+  .header__logo ::slotted(*),
+  .header__logo syn-icon {
+    display: block;
+  }
+
+  /**
+   * Make sure to use the correct color and outline for links
+   */
+  .header__logo ::slotted(a),
+  .header__logo ::slotted(a:hover) {
+    color: var(--syn-logo-color);
+  }
+
+  .header__logo ::slotted(a:is(:focus-visible)) {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  /**
+   * Styles for the default logo. This makes sure the default SICK logo has the correct size and color
+   */
+  .header__logo syn-icon,
+  .header__logo syn-icon::part(svg) {
+    color: var(--syn-logo-color);
+    height: 32px;
+    width: auto;
+  }
+
+  /**
+   * The label section hosts the application name
+   */
+  .header__label {
+    color: var(--syn-typography-color-text);
+    font: var(--syn-body-large-bold);
+    padding: 0 var(--syn-spacing-2x-large);
+    white-space: nowrap;
+  }
+
+  /**
+   * The options menu holds an arbitrary list of <syn-icon-button />
+   */
+  .header__meta-navigation {
+    display: flex;
+    flex: 1;
+    gap: var(--syn-spacing-x-small);
+    justify-content: end;
+  }
+
+  .header__meta-navigation ::slotted(*) {
+    color: var(--syn-interactive-quiet-color);
+    display: contents;
+    font-size: var(--metanavigation-item-size);
+  }
+
+  /**
+   * The horizontal top navigation section
+   */
+  .header__navigation {
+    padding: 0 var(--syn-spacing-large);
+  }
+
+  /**
+   * The burger menu icon styles
+   */
+  .header__burger-menu-toggle {
+    align-items: center;
+    background: none;
+    border: none;
+    color: var(--syn-interactive-quiet-color);
+    cursor: pointer;
+    display: flex;
+    font-size: var(--syn-font-size-x-large);
+    margin-right: calc(var(--syn-spacing-medium) + var(--syn-spacing-2x-small));
+    padding: var(--syn-spacing-x-small);
+    transition: var(--syn-transition-x-fast) color;
+  }
+
+  .header__burger-menu-toggle:hover {
+    color: var(--syn-interactive-quiet-color-hover);
+  }
+
+  .header__burger-menu-toggle:active {
+    color: var(--syn-interactive-quiet-color-active);
+  }
+
+  .header__burger-menu-toggle:focus-visible {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  /**
+   * If the burger menu is provided, use a smaller spacing on the left side
+   */
+  .header--has-burger-menu .header__content {
+    padding-left: var(--syn-spacing-medium);
+  }
+
+  /**
+   * #529: Sticky header styles
+   */
+  :host([sticky]) {
+    box-shadow: var(--syn-shadow-sticky-down);
+    position: sticky;
+    top: var(--sticky-position);
+
+    /* Make sure the header is above all other content, but below any potential modals or overlays */
+    z-index: calc(infinity - 1);
+  }
+`;

package/data/layers/full/component/component:syn-header/components/header.ts

@@ -0,0 +1,12 @@
+import SynHeader from './header.component.js';
+
+export * from './header.component.js';
+export default SynHeader;
+
+SynHeader.define('syn-header');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-header': SynHeader;
+  }
+}

package/data/layers/full/component/component:syn-header/react/SynHeaderJSXElement.ts

@@ -0,0 +1,8 @@
+export type SynHeaderJSXElement = SynCustomElement<
+  SynHeader,
+  [
+    ['syn-burger-menu-closed', SynBurgerMenuClosedEvent],
+    ['syn-burger-menu-hidden', SynBurgerMenuHiddenEvent],
+    ['syn-burger-menu-open', SynBurgerMenuOpenEvent],
+  ]
+>;

package/data/layers/full/component/component:syn-header/react/header.ts

@@ -0,0 +1,68 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '@synergy-design-system/components/components/header/header.component.js';
+
+import { type EventName } from '@lit/react';
+import type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
+import type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
+import type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';
+
+const tagName = 'syn-header';
+Component.define('syn-header');
+
+/**
+ * @summary The <syn-header /> element provides a generic application header
+ * that can be used to add applications name, toolbar and primary navigation.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs
+ * @status stable
+ * @since 1.10.0
+ *
+ * @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 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-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 content - The wrapper most content items reside
+ * @csspart logo - The wrapper the application logo resides in
+ * @csspart label - The element wrapping the application name
+ * @csspart meta-navigation - The Item wrapping the optional application menu
+ * @csspart navigation - The wrapper that is holding the optional top navigation section
+ * @csspart burger-menu-toggle-button - The button that toggles the burger menu
+ *
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
+ */
+export const SynHeader = createComponent({
+  displayName: 'SynHeader',
+  elementClass: Component,
+  events: {
+    onSynBurgerMenuClosed:
+      'syn-burger-menu-closed' as EventName<SynBurgerMenuClosedEvent>,
+    onSynBurgerMenuHidden:
+      'syn-burger-menu-hidden' as EventName<SynBurgerMenuHiddenEvent>,
+    onSynBurgerMenuOpen:
+      'syn-burger-menu-open' as EventName<SynBurgerMenuOpenEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynBurgerMenuClosedEvent } from '@synergy-design-system/components';
+export type { SynBurgerMenuHiddenEvent } from '@synergy-design-system/components';
+export type { SynBurgerMenuOpenEvent } from '@synergy-design-system/components';