@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,91 +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 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.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/menu-item/menu-item.js';
-
-import type { SynMenuItem } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynMenuItem>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-   * The type of menu item to render.
-   * To use `checked`, this value must be set to `checkbox`.
-   */
-  type?: SynMenuItem['type'];
-
-  /**
-   * Draws the item in a checked state.
-   */
-  checked?: SynMenuItem['checked'];
-
-  /**
-   * A unique value to store in the menu item.
-   * This can be used as a way to identify menu items when selected.
-   */
-  value?: SynMenuItem['value'];
-
-  /**
-   * Draws the menu item in a loading state.
-   */
-  loading?: SynMenuItem['loading'];
-
-  /**
-   * Draws the menu item in a disabled state, preventing selection.
-   */
-  disabled?: SynMenuItem['disabled'];
-}>();
-
-// Make sure prop binding only forwards the props that are actually there.
-// This is needed because :param="param" also adds an empty attribute
-// when using web-components, which breaks optional arguments like size in SynInput
-// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
-const visibleProps = computed(() =>
-  Object.fromEntries(
-    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
-  ),
-);
-</script>
-
-<template>
-  <syn-menu-item v-bind="visibleProps" ref="nativeElement">
-    <slot></slot>
-  </syn-menu-item>
-</template>

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

@@ -1,48 +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 { SynMenuLabel } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/menu-label/menu-label.js';
-
-/**
- * @summary Menu labels are used to describe a group of menu items.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The menu label's content.
- *
- * @csspart base - The component's base wrapper.
- * @csspart divider - The divider that is displayed above the content
- * @csspart label - The label that is displayed below the divider
- *
- * @dependency syn-divider
- *
- * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
- */
-@Component({
-  selector: 'syn-menu-label',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynMenuLabelComponent {
-  public nativeElement: SynMenuLabel;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-}

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

@@ -1,35 +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-label/menu-label.component.js';
-
-const tagName = 'syn-menu-label';
-Component.define('syn-menu-label');
-
-/**
- * @summary Menu labels are used to describe a group of menu items.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The menu label's content.
- *
- * @csspart base - The component's base wrapper.
- * @csspart divider - The divider that is displayed above the content
- * @csspart label - The label that is displayed below the divider
- *
- * @dependency syn-divider
- *
- * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
- */
-export const SynMenuLabel = createComponent({
-  displayName: 'SynMenuLabel',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

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

@@ -1,31 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --display-divider: block;
-
-    display: block;
-  }
-
-  .menu-label__divider {
-    --spacing: 0;
-
-    display: var(--display-divider);
-    margin-bottom: var(--syn-spacing-x-small);
-  }
-
-  .menu-label {
-    color: var(--syn-input-color);
-    display: inline-block;
-    font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-medium);
-    font-weight: var(--syn-font-weight-semibold);
-    letter-spacing: var(--syn-letter-spacing-normal);
-    line-height: var(--syn-line-height-normal);
-    padding: var(--syn-spacing-small) var(--syn-spacing-medium);
-
-    /* stylelint-disable-next-line property-no-vendor-prefix */
-    -webkit-user-select: none;
-    user-select: none;
-  }
-`;

package/metadata/packages/components/components/syn-menu-label/component.ts

@@ -1,46 +0,0 @@
-/* eslint-disable */
-import { html } from 'lit';
-import SynDivider from '../divider/divider.component.js';
-import componentStyles from '../../styles/component.styles.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import styles from './menu-label.styles.js';
-import type { CSSResultGroup } from 'lit';
-
-/**
- * @summary Menu labels are used to describe a group of menu items.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The menu label's content.
- *
- * @csspart base - The component's base wrapper.
- * @csspart divider - The divider that is displayed above the content
- * @csspart label - The label that is displayed below the divider
- *
- * @dependency syn-divider
- *
- * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
- */
-export default class SynMenuLabel extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-
-  static dependencies = {
-    'syn-divider': SynDivider,
-  };
-    
-  render() {
-    return html`
-      <div part="base" class="menu-label-wrapper">
-        <syn-divider class="menu-label__divider" part="divider"></syn-divider>
-        <slot part="label" class="menu-label"></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'syn-menu-label': SynMenuLabel;
-  }
-}

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

@@ -1,41 +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 Menu labels are used to describe a group of menu items.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The menu label's content.
- *
- * @csspart base - The component's base wrapper.
- * @csspart divider - The divider that is displayed above the content
- * @csspart label - The label that is displayed below the divider
- *
- * @dependency syn-divider
- *
- * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/menu-label/menu-label.js';
-
-import type { SynMenuLabel } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynMenuLabel>();
-
-defineExpose({
-  nativeElement,
-});
-</script>
-
-<template>
-  <syn-menu-label ref="nativeElement">
-    <slot></slot>
-  </syn-menu-label>
-</template>

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

@@ -1,242 +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 { SynNavItem } from '@synergy-design-system/components';
-import type { SynShowEvent } from '@synergy-design-system/components';
-import type { SynHideEvent } from '@synergy-design-system/components';
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-import '@synergy-design-system/components/components/nav-item/nav-item.js';
-
-/**
- * @summary Flexible button / link component that can be used to quickly build navigations.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs
- * Takes one of 3 forms:
- * - button (default),
- * - link (overrides button if a 'href' is provided),
- * - or accordion (overrides all other if 'children' slot is defined).
- *
- * @status stable
- * @since 1.14.0
- *
- * @dependency syn-divider
- * @dependency syn-icon
- *
- * @event syn-show - Emitted when the navigation item:
- * - has children,
- * - and is clicked while HTML details are hidden.
- *
- * @event syn-hide - Emitted when the navigation item:
- * - has children,
- * - and is clicked while HTML details are shown.
- *
- * @event syn-blur - Emitted when the button loses focus.
- * @event syn-focus - Emitted when the button gains focus.
- *
- * @slot - The navigation item's label.
- * @slot prefix - A presentational prefix icon or similar element.
- * @slot suffix - A presentational suffix icon or similar element.
- * @slot children - Slot used to provide nested child navigation elements.
- * If provided, details and summary elements will be used.
- * A chevron will be shown on the right side regardless of the chevron property.
- *
- * @csspart base - The component's base wrapper including children.
- * @csspart children - The wrapper that holds the children
- * @csspart content-wrapper - The component's content wrapper.
- * @csspart content - The component's content excluding children.
- * @csspart current-indicator - The indicator used when current is set to true
- * @csspart chevron - The container that wraps the chevron.
- * @csspart details - The details element rendered when there are children available
- * @csspart divider - The components optional top divider.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart suffix - The container that wraps the suffix.
- *
- * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.
- * @cssproperty --indentation-stepping - The amount of pixels each level will indent.
- * @cssproperty --display-children - Display property of the children. Defaults to "contents"
- */
-@Component({
-  selector: 'syn-nav-item',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynNavItemComponent {
-  public nativeElement: SynNavItem;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-    this.nativeElement.addEventListener('syn-show', (e: SynShowEvent) => {
-      this.synShowEvent.emit(e);
-    });
-    this.nativeElement.addEventListener('syn-hide', (e: SynHideEvent) => {
-      this.synHideEvent.emit(e);
-    });
-    this.nativeElement.addEventListener('syn-blur', (e: SynBlurEvent) => {
-      this.synBlurEvent.emit(e);
-    });
-    this.nativeElement.addEventListener('syn-focus', (e: SynFocusEvent) => {
-      this.synFocusEvent.emit(e);
-    });
-  }
-
-  /**
-* The navigation item's href target.
-If provided, the navigation item will use an anchor tag otherwise it will use a button tag.
-
-If the 'children' slot is provided, the navigation item will ignore the 'href' and use
-accordion behavior.
- */
-  @Input()
-  set href(v: SynNavItem['href']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.href = v));
-  }
-  get href(): SynNavItem['href'] {
-    return this.nativeElement.href;
-  }
-
-  /**
-   * Tells the browser where to open the link.
-   * Only used when `href` is present.
-   */
-  @Input()
-  set target(v: SynNavItem['target']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.target = v));
-  }
-  get target(): SynNavItem['target'] {
-    return this.nativeElement.target;
-  }
-
-  /**
-* When using `href`, this attribute will map to the underlying link's `rel` attribute.
-Unlike regular links, the default is `noreferrer noopener` to prevent security exploits.
-
-However, if you're using `target` to point to a specific tab/window,
-this will prevent that from working correctly.
-
-You can remove or change the default value by setting the attribute
-to an empty string or a value of your choice, respectively.
- */
-  @Input()
-  set rel(v: SynNavItem['rel']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.rel = v));
-  }
-  get rel(): SynNavItem['rel'] {
-    return this.nativeElement.rel;
-  }
-
-  @Input()
-  set current(v: '' | SynNavItem['current']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.current = v === '' || v),
-    );
-  }
-  get current(): SynNavItem['current'] {
-    return this.nativeElement.current;
-  }
-
-  /**
-   * Disables the navigation item.
-   */
-  @Input()
-  set disabled(v: '' | SynNavItem['disabled']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.disabled = v === '' || v),
-    );
-  }
-  get disabled(): SynNavItem['disabled'] {
-    return this.nativeElement.disabled;
-  }
-
-  /**
-   * The navigation item's orientation.
-   */
-  @Input()
-  set horizontal(v: '' | SynNavItem['horizontal']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.horizontal = v === '' || v),
-    );
-  }
-  get horizontal(): SynNavItem['horizontal'] {
-    return this.nativeElement.horizontal;
-  }
-
-  /**
-* Appends a chevron to the right side of a navigation item.
-Only used if `horizontal` is false.
- */
-  @Input()
-  set chevron(v: '' | SynNavItem['chevron']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.chevron = v === '' || v),
-    );
-  }
-  get chevron(): SynNavItem['chevron'] {
-    return this.nativeElement.chevron;
-  }
-
-  /**
-* Reflects HTML details element state and allows control from parent.
-Only used if `horizontal` is false and `children` is defined.
- */
-  @Input()
-  set open(v: '' | SynNavItem['open']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.open = v === '' || v),
-    );
-  }
-  get open(): SynNavItem['open'] {
-    return this.nativeElement.open;
-  }
-
-  /**
-* Toggle to true to show a divider above the element.
-Only available when horizontal is false.
- */
-  @Input()
-  set divider(v: '' | SynNavItem['divider']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.divider = v === '' || v),
-    );
-  }
-  get divider(): SynNavItem['divider'] {
-    return this.nativeElement.divider;
-  }
-
-  /**
-   * Emitted when the navigation item: - has children, - and is clicked while HTML details are hidden.
-   */
-  @Output() synShowEvent = new EventEmitter<SynShowEvent>();
-
-  /**
-   * Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.
-   */
-  @Output() synHideEvent = new EventEmitter<SynHideEvent>();
-
-  /**
-   * Emitted when the button loses focus.
-   */
-  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
-
-  /**
-   * Emitted when the button gains focus.
-   */
-  @Output() synFocusEvent = new EventEmitter<SynFocusEvent>();
-}
-
-export type { SynShowEvent } from '@synergy-design-system/components';
-export type { SynHideEvent } from '@synergy-design-system/components';
-export type { SynBlurEvent } from '@synergy-design-system/components';
-export type { SynFocusEvent } from '@synergy-design-system/components';

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

@@ -1,82 +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/nav-item/nav-item.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynShowEvent } from '@synergy-design-system/components';
-import type { SynHideEvent } from '@synergy-design-system/components';
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-nav-item';
-Component.define('syn-nav-item');
-
-/**
- * @summary Flexible button / link component that can be used to quickly build navigations.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs
- * Takes one of 3 forms:
- * - button (default),
- * - link (overrides button if a 'href' is provided),
- * - or accordion (overrides all other if 'children' slot is defined).
- *
- * @status stable
- * @since 1.14.0
- *
- * @dependency syn-divider
- * @dependency syn-icon
- *
- * @event syn-show - Emitted when the navigation item:
- * - has children,
- * - and is clicked while HTML details are hidden.
- *
- * @event syn-hide - Emitted when the navigation item:
- * - has children,
- * - and is clicked while HTML details are shown.
- *
- * @event syn-blur - Emitted when the button loses focus.
- * @event syn-focus - Emitted when the button gains focus.
- *
- * @slot - The navigation item's label.
- * @slot prefix - A presentational prefix icon or similar element.
- * @slot suffix - A presentational suffix icon or similar element.
- * @slot children - Slot used to provide nested child navigation elements.
- * If provided, details and summary elements will be used.
- * A chevron will be shown on the right side regardless of the chevron property.
- *
- * @csspart base - The component's base wrapper including children.
- * @csspart children - The wrapper that holds the children
- * @csspart content-wrapper - The component's content wrapper.
- * @csspart content - The component's content excluding children.
- * @csspart current-indicator - The indicator used when current is set to true
- * @csspart chevron - The container that wraps the chevron.
- * @csspart details - The details element rendered when there are children available
- * @csspart divider - The components optional top divider.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart suffix - The container that wraps the suffix.
- *
- * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.
- * @cssproperty --indentation-stepping - The amount of pixels each level will indent.
- * @cssproperty --display-children - Display property of the children. Defaults to "contents"
- */
-export const SynNavItem = createComponent({
-  displayName: 'SynNavItem',
-  elementClass: Component,
-  events: {
-    onSynShow: 'syn-show' as EventName<SynShowEvent>,
-    onSynHide: 'syn-hide' as EventName<SynHideEvent>,
-    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,
-    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynShowEvent } from '@synergy-design-system/components';
-export type { SynHideEvent } from '@synergy-design-system/components';
-export type { SynBlurEvent } from '@synergy-design-system/components';
-export type { SynFocusEvent } from '@synergy-design-system/components';