@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/packages/components/components/syn-menu/component.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-// ---------------------------------------------------------------------
-// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
-// Please do not edit this file directly!
-// It will get recreated when running pnpm build.
-// ---------------------------------------------------------------------
-
-/**
- * @summary Menus provide a list of options for the user to choose from.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The menu's content, including menu items, menu labels, and dividers.
- *
- * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/menu/menu.js';
-
-import type { SynSelectEvent } from '@synergy-design-system/components';
-import type { SynMenu } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynMenu>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map events
-defineEmits<{
-  /**
-   * Emitted when a menu item is selected.
-   */
-  'syn-select': [e: SynSelectEvent];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynSelectEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-menu @syn-select="$emit('syn-select', $event)" ref="nativeElement">
-    <slot></slot>
-  </syn-menu>
-</template>

package/metadata/packages/components/components/syn-menu-item/component.angular.ts

@@ -1,121 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 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 { SynMenuItem } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/menu-item/menu-item.js';
-
-/**
- * @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.
- */
-@Component({
-  selector: 'syn-menu-item',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynMenuItemComponent {
-  public nativeElement: SynMenuItem;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-   * The type of menu item to render.
-   * To use `checked`, this value must be set to `checkbox`.
-   */
-  @Input()
-  set type(v: SynMenuItem['type']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.type = v));
-  }
-  get type(): SynMenuItem['type'] {
-    return this.nativeElement.type;
-  }
-
-  /**
-   * Draws the item in a checked state.
-   */
-  @Input()
-  set checked(v: '' | SynMenuItem['checked']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.checked = v === '' || v),
-    );
-  }
-  get checked(): SynMenuItem['checked'] {
-    return this.nativeElement.checked;
-  }
-
-  /**
-   * A unique value to store in the menu item.
-   * This can be used as a way to identify menu items when selected.
-   */
-  @Input()
-  set value(v: SynMenuItem['value']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
-  }
-  get value(): SynMenuItem['value'] {
-    return this.nativeElement.value;
-  }
-
-  /**
-   * Draws the menu item in a loading state.
-   */
-  @Input()
-  set loading(v: '' | SynMenuItem['loading']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.loading = v === '' || v),
-    );
-  }
-  get loading(): SynMenuItem['loading'] {
-    return this.nativeElement.loading;
-  }
-
-  /**
-   * Draws the menu item in a disabled state, preventing selection.
-   */
-  @Input()
-  set disabled(v: '' | SynMenuItem['disabled']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.disabled = v === '' || v),
-    );
-  }
-  get disabled(): SynMenuItem['disabled'] {
-    return this.nativeElement.disabled;
-  }
-}

package/metadata/packages/components/components/syn-menu-item/component.react.ts

@@ -1,45 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 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,
-});

package/metadata/packages/components/components/syn-menu-item/component.styles.ts

@@ -1,285 +0,0 @@
-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/metadata/packages/components/components/syn-menu-item/component.ts

@@ -1,201 +0,0 @@
-/* eslint-disable */
-import { classMap } from 'lit/directives/class-map.js';
-import { getTextContent, HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { property, query } from 'lit/decorators.js';
-import { SubmenuController } from './submenu-controller.js';
-import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import SynIcon from '../icon/icon.component.js';
-import SynPopup from '../popup/popup.component.js';
-import SynSpinner from '../spinner/spinner.component.js';
-import styles from './menu-item.styles.js';
-import { emitEventForPropertyUpdates } from '../../internal/watchEvent.js';
-import type { CSSResultGroup } from 'lit';
-
-/**
- * @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.
- */
-@emitEventForPropertyUpdates(['type', 'loading'], {
-  waitUntilFirstUpdated: true,
-})
-export default class SynMenuItem extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  static dependencies = {
-    'syn-icon': SynIcon,
-    'syn-popup': SynPopup,
-    'syn-spinner': SynSpinner
-  };
-
-  private cachedTextLabel: string;
-  private readonly localize = new LocalizeController(this);
-
-  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
-  @query('.menu-item') menuItem: HTMLElement;
-
-  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
-  @property() type: 'normal' | 'checkbox' = 'normal';
-
-  /** Draws the item in a checked state. */
-  @property({ type: Boolean, reflect: true }) checked = false;
-
-  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
-  @property() value = '';
-
-  /** Draws the menu item in a loading state. */
-  @property({ type: Boolean, reflect: true }) loading = false;
-
-  /** Draws the menu item in a disabled state, preventing selection. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  private readonly hasSlotController = new HasSlotController(this, 'submenu');
-  private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController);
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.handleHostClick);
-    this.addEventListener('mouseover', this.handleMouseOver);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('click', this.handleHostClick);
-    this.removeEventListener('mouseover', this.handleMouseOver);
-  }
-
-  private handleDefaultSlotChange() {
-    const textLabel = this.getTextLabel();
-
-    // Ignore the first time the label is set
-    if (typeof this.cachedTextLabel === 'undefined') {
-      this.cachedTextLabel = textLabel;
-      return;
-    }
-
-    // When the label changes, emit a slotchange event so parent controls see it
-    if (textLabel !== this.cachedTextLabel) {
-      this.cachedTextLabel = textLabel;
-      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });
-    }
-  }
-
-  private handleHostClick = (event: MouseEvent) => {
-    // Prevent the click event from being emitted when the button is disabled or loading
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  };
-
-  private handleMouseOver = (event: MouseEvent) => {
-    this.focus();
-    event.stopPropagation();
-  };
-
-  @watch('checked')
-  handleCheckedChange() {
-    // For proper accessibility, users have to use type="checkbox" to use the checked attribute
-    if (this.checked && this.type !== 'checkbox') {
-      this.checked = false;
-      console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
-      return;
-    }
-
-    // Only checkbox types can receive the aria-checked attribute
-    if (this.type === 'checkbox') {
-      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-    } else {
-      this.removeAttribute('aria-checked');
-    }
-  }
-
-  @watch('disabled')
-  handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-  }
-
-  @watch('type')
-  handleTypeChange() {
-    if (this.type === 'checkbox') {
-      this.setAttribute('role', 'menuitemcheckbox');
-      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-    } else {
-      this.setAttribute('role', 'menuitem');
-      this.removeAttribute('aria-checked');
-    }
-  }
-
-  /** Returns a text label based on the contents of the menu item's default slot. */
-  getTextLabel() {
-    return getTextContent(this.defaultSlot);
-  }
-
-  isSubmenu() {
-    return this.hasSlotController.test('submenu');
-  }
-
-  render() {
-    const isRtl = this.localize.dir() === 'rtl';
-    const isSubmenuExpanded = this.submenuController.isExpanded();
-
-    return html`
-      <div
-        id="anchor"
-        part="base"
-        class=${classMap({
-          'menu-item': true,
-          'menu-item--rtl': isRtl,
-          'menu-item--checked': this.checked,
-          'menu-item--disabled': this.disabled,
-          'menu-item--loading': this.loading,
-          'menu-item--has-submenu': this.isSubmenu(),
-          'menu-item--submenu-expanded': isSubmenuExpanded
-        })}
-        ?aria-haspopup="${this.isSubmenu()}"
-        ?aria-expanded="${isSubmenuExpanded ? true : false}"
-      >
-        <span part="checked-icon" class="menu-item__check">
-          <syn-icon name="check" library="system" aria-hidden="true"></syn-icon>
-        </span>
-
-        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
-
-        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
-
-        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
-
-        <span part="submenu-icon" class="menu-item__chevron">
-          <syn-icon name="chevron-down" library="system" aria-hidden="true"></syn-icon>
-        </span>
-
-        ${this.submenuController.renderSubmenu()}
-        ${this.loading ? html` <syn-spinner part="spinner" exportparts="base:spinner__base"></syn-spinner> ` : ''}
-      </div>
-    `;
-  }
-}