@synergy-design-system/metadata 1.0.0 → 3.0.1

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

@@ -0,0 +1,285 @@
+import { css } from 'lit';
+
+export default css`
+  /* stylelint-disable no-descending-specificity */
+  :host {
+    --submenu-offset: -2px;
+
+    /* Custom override for hiding the checkmark in menus it is not needed */
+    --display-checkmark: flex;
+
+    /**
+     * Default size settings for menu-item
+     * This prepares the custom sizes that we will add later on
+     * @see https://github.com/synergy-design-system/design/issues/277
+     */
+    --menuitem-inset-border-horizontal: var(--syn-spacing-2x-small);
+    --menuitem-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);
+    --menuitem-min-height: var(--syn-input-height-medium);
+    --menuitem-padding: var(--syn-input-spacing-medium);
+    --menuitem-font-size: var(--syn-input-font-size-medium);
+    --menuitem-icon-size: var(--syn-spacing-large);
+
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    align-items: center;
+
+    /*
+     * #1127: Brand2025 defines a small gap between options
+     * and rounded corners. We achieve that using an border
+     * that simulates the gap using the menu background color.
+     */
+    border: solid var(--syn-panel-background-color);
+
+    /* Border Radius needs to be increased to cover the outline */
+    border-radius: calc(var(--syn-focus-ring-border-radius) + var(--menuitem-inset-border-vertical));
+    border-width: var(--menuitem-inset-border-horizontal) var(--menuitem-inset-border-vertical);
+    color: var(--syn-option-color);
+    cursor: pointer;
+    display: flex;
+    font-family: var(--syn-font-sans);
+    font-size: var(--menuitem-font-size);
+    font-weight: var(--syn-font-weight-normal);
+    letter-spacing: var(--syn-letter-spacing-normal);
+    line-height: var(--syn-line-height-normal);
+
+    /* Height is dependent on line-height of .option__label, which does not fit the layout completely */
+    min-height: var(--menuitem-min-height, var(--syn-input-height-medium));
+    padding: 0 calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
+    position: relative;
+    transition: var(--syn-transition-fast) fill;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .menu-item.menu-item--disabled {
+    cursor: not-allowed;
+
+    /** #429: Use token for opacity */
+    opacity: var(--syn-opacity-50);
+    outline: none;
+  }
+
+  .menu-item.menu-item--loading {
+    cursor: wait;
+    outline: none;
+  }
+
+  .menu-item.menu-item--loading *:not(syn-spinner) {
+    opacity: var(--syn-opacity-50);
+  }
+
+  .menu-item--loading syn-spinner {
+    --indicator-color: currentColor;
+    --track-width: 2px;
+
+    color: var(--syn-interactive-emphasis-color);
+    font-size: var(--syn-font-size-medium);
+    left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
+    opacity: 1;
+    position: absolute;
+    top: calc(50% - 0.5em);
+  }
+
+  .menu-item .menu-item__label {
+    display: inline-block;
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .menu-item .menu-item__prefix {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--syn-spacing-small);
+  }
+
+  .menu-item .menu-item__suffix {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  /**
+   * Set the default font size to make icons appear correct
+   */
+  .menu-item .menu-item__prefix::slotted(syn-icon),
+  .menu-item .menu-item__suffix::slotted(syn-icon) {
+    color: var(--syn-option-icon-color);
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  /**
+   * #1194: Make sure hover is only done on non disabled items
+   */
+  :host(:hover) .menu-item:not(.menu-item--disabled) .menu-item__prefix::slotted(syn-icon),
+  :host(:hover) .menu-item:not(.menu-item--disabled) .menu-item__suffix::slotted(syn-icon) {
+    color: var(--syn-option-icon-color-hover);
+  }
+
+  :host(:focus-visible) .menu-item .menu-item__prefix::slotted(syn-icon),
+  :host(:focus-visible) .menu-item .menu-item__suffix::slotted(syn-icon) {
+    color: var(--syn-option-icon-color-active);
+  }
+
+  /* Safe triangle */
+  .menu-item--submenu-expanded::after {
+    clip-path: polygon(
+      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
+    );
+    content: '';
+    inset: 0;
+    position: fixed;
+    z-index: calc(var(--syn-z-index-dropdown) - 1);
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true']):not(:focus-visible)) .menu-item,
+  .menu-item--submenu-expanded {
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
+  }
+
+  :host(:focus-visible) .menu-item {
+    background-color: var(--syn-option-background-color-active);
+    color: var(--syn-color-neutral-0);
+    opacity: 1;
+    outline: none;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    align-items: center;
+    display: var(--display-checkmark);
+    flex: 0 0 auto;
+    font-size: var(--syn-font-size-x-large);
+    justify-content: center;
+    visibility: hidden;
+    width: var(--syn-font-size-x-large);
+  }
+
+  .menu-item .menu-item__check {
+    color: var(--syn-option-check-color);
+    margin-inline-end: var(--syn-spacing-small);
+  }
+
+  /**
+   * This makes sure the chevron does not take any space if we do not have children
+   */
+  .menu-item .menu-item__chevron {
+    display: none;
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  /**
+   * Make sure to show the chevron if there are children
+   */
+  .menu-item--has-submenu .menu-item__chevron {
+    display: flex;
+  }
+
+  /**
+   * When in loading state, do not show the checkmark as it would bleed through
+   */
+  .menu-item--loading .menu-item__check {
+    visibility: hidden;
+  }
+
+  /**
+   * Make sure the checkbox is also visible when the item is active
+   */
+  :host(:focus-visible) .menu-item--checked .menu-item__check {
+    color: var(--syn-option-check-color-active);
+  }
+
+  :host(:hover) .menu-item--checked:not(.menu-item--disabled) .menu-item__check {  
+    color: var(--syn-option-check-color-hover);
+  }
+
+  /**
+   * Special handling for the submenu chevron:
+   * We are using the "chevron-down" icon per default as
+   * we do not want all chevrons to be part of the bundle
+   * Therefore, we have to transform it into the right direction
+   */
+  .menu-item .menu-item__chevron syn-icon {
+    transform: rotate(-90deg);
+  }
+
+  .menu-item--rtl .menu-item__chevron syn-icon {
+    transform: rotate(90deg);
+  }
+
+  /**
+   * Highlight checked items
+   */
+  .menu-item--checked .menu-item__label {
+    font-weight: var(--syn-font-weight-semibold);
+  }
+
+  /* Needed if we do not show the checkmark */
+  :host(:not([type="checkmark"]):not([loading])) .menu-item__label {
+    min-height: var(--syn-font-size-x-large);
+  }
+
+  /* Add elevation and z-index to submenus */
+  syn-popup::part(popup) {
+    /* #1131: Make sure that slotted menus do show the correct border radius */
+    border-radius: var(--syn-input-border-radius-medium);
+    box-shadow: var(--syn-shadow-large);
+    margin-left: var(--submenu-offset);
+    z-index: var(--syn-z-index-dropdown);
+  }
+
+  .menu-item--rtl syn-popup::part(popup) {
+    margin-left: calc(-1 * var(--submenu-offset));
+  }
+
+  /**
+   * #1009: Adjust the position for submenus when they are opened to the left, too.
+   * This works because the data-current-placement attribute is set on the popup accordingly.
+   * We do not use the actual placement attribute, because it does not update when the placement changes
+   */
+  syn-popup[data-current-placement^="left"]::part(popup) {
+    margin-left: calc(-1 * var(--submenu-offset));
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+
+  ::slotted(syn-menu) {
+    max-height: var(--auto-size-available-height) !important;
+    max-width: var(--auto-size-available-width) !important;
+  }
+`;

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

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import SynMenuItem from './menu-item.component.js';
+
+export * from './menu-item.component.js';
+export default SynMenuItem;
+
+SynMenuItem.define('syn-menu-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-menu-item': SynMenuItem;
+  }
+}

package/data/layers/full/component/component:syn-menu-item/components/submenu-controller.ts

@@ -0,0 +1,285 @@
+/* eslint-disable */
+import { createRef, ref, type Ref } from 'lit/directives/ref.js';
+import { type HasSlotController } from '../../internal/slot.js';
+import { html } from 'lit';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type SynMenuItem from './menu-item.js';
+import type SynPopup from '../popup/popup.js';
+
+/** A reactive controller to manage the registration of event listeners for submenus. */
+export class SubmenuController implements ReactiveController {
+  private host: ReactiveControllerHost & SynMenuItem;
+  private popupRef: Ref<SynPopup> = createRef();
+  private enableSubmenuTimer = -1;
+  private isConnected = false;
+  private isPopupConnected = false;
+  private skidding = 0;
+  private readonly hasSlotController: HasSlotController;
+  private readonly submenuOpenDelay = 100;
+
+  constructor(host: ReactiveControllerHost & SynMenuItem, hasSlotController: HasSlotController) {
+    (this.host = host).addController(this);
+    this.hasSlotController = hasSlotController;
+  }
+
+  hostConnected() {
+    if (this.hasSlotController.test('submenu') && !this.host.disabled) {
+      this.addListeners();
+    }
+  }
+
+  hostDisconnected() {
+    this.removeListeners();
+  }
+
+  hostUpdated() {
+    if (this.hasSlotController.test('submenu') && !this.host.disabled) {
+      this.addListeners();
+      this.updateSkidding();
+    } else {
+      this.removeListeners();
+    }
+  }
+
+  private addListeners() {
+    if (!this.isConnected) {
+      this.host.addEventListener('mousemove', this.handleMouseMove);
+      this.host.addEventListener('mouseover', this.handleMouseOver);
+      this.host.addEventListener('keydown', this.handleKeyDown);
+      this.host.addEventListener('click', this.handleClick);
+      this.host.addEventListener('focusout', this.handleFocusOut);
+      this.isConnected = true;
+    }
+
+    // The popup does not seem to get wired when the host is
+    // connected, so manage its listeners separately.
+    if (!this.isPopupConnected) {
+      if (this.popupRef.value) {
+        this.popupRef.value.addEventListener('mouseover', this.handlePopupMouseover);
+        this.popupRef.value.addEventListener('syn-reposition', this.handlePopupReposition);
+        this.isPopupConnected = true;
+      }
+    }
+  }
+
+  private removeListeners() {
+    if (this.isConnected) {
+      this.host.removeEventListener('mousemove', this.handleMouseMove);
+      this.host.removeEventListener('mouseover', this.handleMouseOver);
+      this.host.removeEventListener('keydown', this.handleKeyDown);
+      this.host.removeEventListener('click', this.handleClick);
+      this.host.removeEventListener('focusout', this.handleFocusOut);
+      this.isConnected = false;
+    }
+    if (this.isPopupConnected) {
+      if (this.popupRef.value) {
+        this.popupRef.value.removeEventListener('mouseover', this.handlePopupMouseover);
+        this.popupRef.value.removeEventListener('syn-reposition', this.handlePopupReposition);
+        this.isPopupConnected = false;
+      }
+    }
+  }
+
+  // Set the safe triangle cursor position
+  private handleMouseMove = (event: MouseEvent) => {
+    this.host.style.setProperty('--safe-triangle-cursor-x', `${event.clientX}px`);
+    this.host.style.setProperty('--safe-triangle-cursor-y', `${event.clientY}px`);
+  };
+
+  private handleMouseOver = () => {
+    if (this.hasSlotController.test('submenu')) {
+      this.enableSubmenu();
+    }
+  };
+
+  private handleSubmenuEntry(event: KeyboardEvent) {
+    // Pass focus to the first menu-item in the submenu.
+    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
+
+    // Missing slot
+    if (!submenuSlot) {
+      console.error('Cannot activate a submenu if no corresponding menuitem can be found.', this);
+      return;
+    }
+
+    // Menus
+    let menuItems: NodeListOf<Element> | null = null;
+    for (const elt of submenuSlot.assignedElements()) {
+      menuItems = elt.querySelectorAll("syn-menu-item, [role^='menuitem']");
+      if (menuItems.length !== 0) {
+        break;
+      }
+    }
+
+    if (!menuItems || menuItems.length === 0) {
+      return;
+    }
+
+    menuItems[0].setAttribute('tabindex', '0');
+    for (let i = 1; i !== menuItems.length; ++i) {
+      menuItems[i].setAttribute('tabindex', '-1');
+    }
+
+    // Open the submenu (if not open), and set focus to first menuitem.
+    if (this.popupRef.value) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.popupRef.value.active) {
+        if (menuItems[0] instanceof HTMLElement) {
+          menuItems[0].focus();
+        }
+      } else {
+        this.enableSubmenu(false);
+        this.host.updateComplete.then(() => {
+          if (menuItems[0] instanceof HTMLElement) {
+            menuItems[0].focus();
+          }
+        });
+        this.host.requestUpdate();
+      }
+    }
+  }
+
+  // Focus on the first menu-item of a submenu.
+  private handleKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'Escape':
+      case 'Tab':
+        this.disableSubmenu();
+        break;
+      case 'ArrowLeft':
+        // Either focus is currently on the host element or a child
+        if (event.target !== this.host) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.host.focus();
+          this.disableSubmenu();
+        }
+        break;
+      case 'ArrowRight':
+      case 'Enter':
+      case ' ':
+        this.handleSubmenuEntry(event);
+        break;
+      default:
+        break;
+    }
+  };
+
+  private handleClick = (event: MouseEvent) => {
+    // Clicking on the item which heads the menu does nothing, otherwise hide submenu and propagate
+    if (event.target === this.host) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (
+      event.target instanceof Element &&
+      (event.target.tagName === 'syn-menu-item' || event.target.role?.startsWith('menuitem'))
+    ) {
+      this.disableSubmenu();
+    }
+  };
+
+  // Close this submenu on focus outside of the parent or any descendants.
+  private handleFocusOut = (event: FocusEvent) => {
+    if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {
+      return;
+    }
+    this.disableSubmenu();
+  };
+
+  // Prevent the parent menu-item from getting focus on mouse movement on the submenu
+  private handlePopupMouseover = (event: MouseEvent) => {
+    event.stopPropagation();
+  };
+
+  // Set the safe triangle values for the submenu when the position changes
+  private handlePopupReposition = () => {
+    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
+    const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'syn-menu')[0];
+    const isRtl = getComputedStyle(this.host).direction === 'rtl';
+    if (!menu) {
+      return;
+    }
+
+    const { left, top, width, height } = menu.getBoundingClientRect();
+
+    this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-end-y', `${top + height}px`);
+  };
+
+  private setSubmenuState(state: boolean) {
+    if (this.popupRef.value) {
+      if (this.popupRef.value.active !== state) {
+        this.popupRef.value.active = state;
+        this.host.requestUpdate();
+      }
+    }
+  }
+
+  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the
+  // newly opened menu.
+  private enableSubmenu(delay = true) {
+    if (delay) {
+      window.clearTimeout(this.enableSubmenuTimer);
+      this.enableSubmenuTimer = window.setTimeout(() => {
+        this.setSubmenuState(true);
+      }, this.submenuOpenDelay);
+    } else {
+      this.setSubmenuState(true);
+    }
+  }
+
+  private disableSubmenu() {
+    window.clearTimeout(this.enableSubmenuTimer);
+    this.setSubmenuState(false);
+  }
+
+  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
+  private updateSkidding(): void {
+    // .computedStyleMap() not always available.
+    if (!this.host.parentElement?.computedStyleMap) {
+      return;
+    }
+    const styleMap: StylePropertyMapReadOnly = this.host.parentElement.computedStyleMap();
+    const attrs: string[] = ['padding-top', 'border-top-width', 'margin-top'];
+
+    const skidding = attrs.reduce((accumulator, attr) => {
+      const styleValue: CSSStyleValue = styleMap.get(attr) ?? new CSSUnitValue(0, 'px');
+      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, 'px');
+      const pxValue = unitValue.to('px');
+      return accumulator - pxValue.value;
+    }, 0);
+
+    this.skidding = skidding;
+  }
+
+  isExpanded(): boolean {
+    return this.popupRef.value ? this.popupRef.value.active : false;
+  }
+
+  renderSubmenu() {
+    const isRtl = getComputedStyle(this.host).direction === 'rtl';
+
+    // Always render the slot, but conditionally render the outer <syn-popup>
+    if (!this.isConnected) {
+      return html` <slot name="submenu" hidden></slot> `;
+    }
+
+    return html`
+      <syn-popup
+        ${ref(this.popupRef)}
+        placement=${isRtl ? 'left-start' : 'right-start'}
+        anchor="anchor"
+        flip
+        flip-fallback-strategy="best-fit"
+        skidding="${this.skidding}"
+        auto-size="vertical"
+        auto-size-padding="10"
+      >
+        <slot name="submenu"></slot>
+      </syn-popup>
+    `;
+  }
+}

package/data/layers/full/component/component:syn-menu-item/react/SynMenuItemJSXElement.ts

@@ -0,0 +1 @@
+export type SynMenuItemJSXElement = SynCustomElement<SynMenuItem, []>;

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

@@ -0,0 +1,45 @@
+// ---------------------------------------------------------------------
+// 🔒 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/menu-item/menu-item.component.js';
+
+const tagName = 'syn-menu-item';
+Component.define('syn-menu-item');
+
+/**
+ * @summary Menu items provide options for the user to pick from in a menu.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-item--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-popup
+ * @dependency syn-spinner
+ *
+ * @slot - The menu item's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ * @slot submenu - Used to denote a nested menu.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
+ * @csspart prefix - The prefix container.
+ * @csspart label - The menu item label.
+ * @csspart suffix - The suffix container.
+ * @csspart spinner - The spinner that shows when the menu item is in the loading state.
+ * @csspart spinner__base - The spinner's base part.
+ * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
+ *
+ * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
+ */
+export const SynMenuItem = createComponent({
+  displayName: 'SynMenuItem',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});