@synergy-design-system/mcp 2.15.0 → 3.0.0

package/metadata/packages/assets/README.md

@@ -1,103 +0,0 @@
-# @synergy-design-system/assets
-
-This package provides assets like:
-
-- **logos:** a collection of various logos (such as the variants of the SICK brand logo)
-- **icons:** the standard icons based on [Material Icons](https://fonts.google.com/icons)
-- **system-icons:** a small subset of icons, that are internally used by the Synergy components
-- **component-thumbnails:** preview icons of components, used in the Synergy documentation page
-
-The source of the assets can be found at [Figma](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=104-233&mode=design&t=GPu4VVd9yffLLAaS-0)
-
-### Installation
-
-Please make sure to install the assets package as `devDependency` or `dependency`:
-
-```bash
-# If you are only interested in the filesystem based icons,
-# install as a devDependency
-npm install --save-dev @synergy-design-system/assets
-
-# If you are using javascript imports in your code directly,
-# install as a dependency
-npm install --save @synergy-design-system/assets
-```
-
-### Usage
-
-#### Icons
-
-All icons are provided as SVG files. The assets package is organized with brand-specific namespaces to ensure clear separation between different icon sets.
-
-The recommended way of using the icons is with the [<syn-icon> Synergy component](https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs). Here you will also get more information about setting up the assets package on bundlers like vite.
-
-```html
-<syn-icon name="warning"></syn-icon>
-```
-
-#### Programmatic Access
-
-You can also import icon sets programmatically:
-
-```javascript
-import { sick2025Icons, sick2018Icons } from "@synergy-design-system/assets";
-// or import the default icon set (currently sick2025Icons)
-import { defaultIcons } from "@synergy-design-system/assets";
-
-// Access specific icons
-const warningIcon = sick2025Icons.warning;
-```
-
----
-
-## Development
-
-This package provides assets from Figma organized in a clear brand-based hierarchy.
-The folder structure corresponds to the brand revisions and their respective usage.
-
-- **src/component-thumbnails:** Contains thumbnails from Figma components used in Storybook
-- **src/sick2025:** Contains the SICK 2025 brand revision assets
-  - **icons/outline:** Outline variant icons based on [Material Icons](https://fonts.google.com/icons). These are the preferred icons for applications.
-  - **icons/fill:** Filled variant icons based on [Material Icons](https://fonts.google.com/icons). Should be used where alternatives are needed only.
-  - **js:** Javascript export of the sick2025 icons
-  - **logos:** Contains variants of the SICK brand logo for the SICK 2025 brand revision
-  - **system-icons:** Internal icons used by Synergy components (v3+)
-- **src/sick2018:** Contains the SICK 2018 brand revision assets (legacy)
-  - **icons:** Standard icons based on [Material Icons](https://fonts.google.com/icons) (v2)
-  - **js:** Javascript export of the sick2018 icons
-  - **logos:** Contains variants of the SICK brand logo for the SICK 2018 brand revision
-  - **system-icons:** Internal icons used by Synergy components (v2)
-
-> **Note:** All assets from figma, which should not appear in this package (e.g. documentation), will start with an underscore (e.g. \_my-doc-for-an-asset). This assets are getting filtered and ignored by this package.
-
-### Setup
-
-To update the assets from Figma, first of all a personal access token in Figma needs to be created.
-The documentation how this can be achieved can be found [here](https://www.figma.com/developers/api#access-tokens).
-The only needed scope is "File content" set to readonly.
-
-After the creation of the personal access token, it needs to be saved in a **_.env_** file with the variable **_"FIGMA_TOKEN"_**.
-It should look like following:
-
-```bash
-FIGMA_TOKEN = "my-personal-access-token"
-```
-
-### Update assets from Figma
-
-If something in the Figma assets got changed, the assets of this package also needs to be updated.
-To update the assets run following in the terminal of the assets package folder:
-
-```bash
-pnpm build:all
-```
-
-This will:
-
-- Clean up the `src` directory
-- Download all assets from Figma into brand-specific namespaces
-- Build TypeScript exports for programmatic access
-- Create the migration iconsets for Synergy 2018 to 2025 via `pnpm create-migration-iconset`
-- Recreate the license files in the different folders
-- Create [code connect files](https://www.figma.com/code-connect-docs/html) for all icons. Please be aware you have to call `pnpm figma-export:icons` in the components package to publish the icons!
-- Create the default export for the SICK 2025 icons located in `src/sick2025/js/index.ts`

package/metadata/packages/components/components/syn-accordion/component.angular.ts

@@ -1,80 +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 { SynAccordion } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/accordion/accordion.js';
-
-/**
- * @summary Accordions provide the ability to group a list of `<syn-details>`.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
- * @status stable
- * @since 1.23.0
- *
- * @slot - The accordion's main content. Must be `<syn-details />` elements.
- *
- * @csspart base - The component's base wrapper.
- */
-@Component({
-  selector: 'syn-accordion',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynAccordionComponent {
-  public nativeElement: SynAccordion;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-   * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.
-   */
-  @Input()
-  set closeOthers(v: '' | SynAccordion['closeOthers']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.closeOthers = v === '' || v),
-    );
-  }
-  get closeOthers(): SynAccordion['closeOthers'] {
-    return this.nativeElement.closeOthers;
-  }
-
-  /**
-   * Draws the accordion and the slotted `<syn-details>` as contained elements.
-   */
-  @Input()
-  set contained(v: '' | SynAccordion['contained']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.contained = v === '' || v),
-    );
-  }
-  get contained(): SynAccordion['contained'] {
-    return this.nativeElement.contained;
-  }
-
-  /**
-   * The size that should be applied to all slotted `<syn-details>` elements
-   */
-  @Input()
-  set size(v: SynAccordion['size']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
-  }
-  get size(): SynAccordion['size'] {
-    return this.nativeElement.size;
-  }
-}

package/metadata/packages/components/components/syn-accordion/component.react.ts

@@ -1,30 +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/accordion/accordion.component.js';
-
-const tagName = 'syn-accordion';
-Component.define('syn-accordion');
-
-/**
- * @summary Accordions provide the ability to group a list of `<syn-details>`.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
- * @status stable
- * @since 1.23.0
- *
- * @slot - The accordion's main content. Must be `<syn-details />` elements.
- *
- * @csspart base - The component's base wrapper.
- */
-export const SynAccordion = createComponent({
-  displayName: 'SynAccordion',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

package/metadata/packages/components/components/syn-accordion/component.styles.ts

@@ -1,15 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    display: block;
-  }
-
-  .accordion--contained ::slotted(syn-details) {
-    margin-bottom: var(--syn-spacing-x-small);
-  }
-
-  .accordion--contained ::slotted(syn-details:last-of-type){
-    margin-bottom: 0;
-  }
-`;

package/metadata/packages/components/components/syn-accordion/component.ts

@@ -1,111 +0,0 @@
-import { html } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-import type { CSSResultGroup } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './accordion.styles.js';
-import type SynDetails from '../details/details.component.js';
-import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
-
-/**
- * @summary Accordions provide the ability to group a list of `<syn-details>`.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
- * @status stable
- * @since 1.23.0
- *
- * @slot - The accordion's main content. Must be `<syn-details />` elements.
- *
- * @csspart base - The component's base wrapper.
- */
-@enableDefaultSettings('SynAccordion')
-export default class SynAccordion extends SynergyElement {
-  static styles: CSSResultGroup = [
-    componentStyles,
-    styles,
-  ];
-
-  @queryAssignedElements({ selector: 'syn-details' }) detailsInDefaultSlot!: SynDetails[];
-
-  /**
-   * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.
-   */
-  @property({ attribute: 'close-others', type: Boolean }) closeOthers = false;
-
-  /** Draws the accordion and the slotted `<syn-details>` as contained elements. */
-  @property({ reflect: true, type: Boolean }) contained = false;
-
-  /** The size that should be applied to all slotted `<syn-details>` elements */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
-  private adjustDetailsSize() {
-    this.detailsInDefaultSlot.forEach(detail => {
-      detail.setAttribute('size', this.size);
-    });
-  }
-
-  private adjustDetailsContained() {
-    this.detailsInDefaultSlot.forEach(detail => {
-      // eslint-disable-next-line no-param-reassign
-      detail.contained = this.contained;
-    });
-  }
-
-  @watch('size', { waitUntilFirstUpdate: true })
-  handleSizeChange() {
-    this.adjustDetailsSize();
-  }
-
-  @watch('contained', { waitUntilFirstUpdate: true })
-  handleContainedChange() {
-    this.adjustDetailsContained();
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('syn-show', this.handleAccordionShow);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('syn-show', this.handleAccordionShow);
-  }
-
-  handleSlotChange() {
-    this.adjustDetailsSize();
-    this.adjustDetailsContained();
-  }
-
-  private handleAccordionShow = (event: Event) => {
-    if (this.closeOthers) {
-      this.detailsInDefaultSlot.forEach(detailsElement => {
-        // Break if detailsElement sent the event
-        if (detailsElement === event.target) {
-          return;
-        }
-        // Break if detailsElement is outside this group
-        if (detailsElement.parentNode !== (event.target as HTMLUnknownElement).parentNode) {
-          return;
-        }
-        detailsElement.removeAttribute('open');
-      });
-    }
-  };
-
-  render() {
-    /* eslint-disable @typescript-eslint/unbound-method */
-    return html`
-      <div 
-        part="base"
-        class=${classMap({
-          accordion: true,
-          'accordion--contained': this.contained,
-        })}>
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-    /* eslint-enable @typescript-eslint/unbound-method */
-  }
-}

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

@@ -1,64 +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 Accordions provide the ability to group a list of `<syn-details>`.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
- * @status stable
- * @since 1.23.0
- *
- * @slot - The accordion's main content. Must be `<syn-details />` elements.
- *
- * @csspart base - The component's base wrapper.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/accordion/accordion.js';
-
-import type { SynAccordion } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynAccordion>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-   * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.
-   */
-  closeOthers?: SynAccordion['closeOthers'];
-
-  /**
-   * Draws the accordion and the slotted `<syn-details>` as contained elements.
-   */
-  contained?: SynAccordion['contained'];
-
-  /**
-   * The size that should be applied to all slotted `<syn-details>` elements
-   */
-  size?: SynAccordion['size'];
-}>();
-
-// 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-accordion v-bind="visibleProps" ref="nativeElement">
-    <slot></slot>
-  </syn-accordion>
-</template>

package/metadata/packages/components/components/syn-alert/component.angular.ts

@@ -1,169 +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 { SynAlert } from '@synergy-design-system/components';
-import type { SynShowEvent } from '@synergy-design-system/components';
-import type { SynAfterShowEvent } from '@synergy-design-system/components';
-import type { SynHideEvent } from '@synergy-design-system/components';
-import type { SynAfterHideEvent } from '@synergy-design-system/components';
-import '@synergy-design-system/components/components/alert/alert.js';
-
-/**
- * @summary Alerts are used to display important messages inline or as toast notifications.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon-button
- *
- * @slot - The alert's main content.
- * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
- *
- * @event syn-show - Emitted when the alert opens.
- * @event syn-after-show - Emitted after the alert opens and all animations are complete.
- * @event syn-hide - Emitted when the alert closes.
- * @event syn-after-hide - Emitted after the alert closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper.
- * @csspart icon - The container that wraps the optional icon.
- * @csspart message - The container that wraps the alert's main content.
- * @csspart close-button - The close button, an `<syn-icon-button>`.
- * @csspart close-button__base - The close button's exported `base` part.
- *
- * @animation alert.show - The animation to use when showing the alert.
- * @animation alert.hide - The animation to use when hiding the alert.
- */
-@Component({
-  selector: 'syn-alert',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynAlertComponent {
-  public nativeElement: SynAlert;
-  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-after-show',
-      (e: SynAfterShowEvent) => {
-        this.synAfterShowEvent.emit(e);
-      },
-    );
-    this.nativeElement.addEventListener('syn-hide', (e: SynHideEvent) => {
-      this.synHideEvent.emit(e);
-    });
-    this.nativeElement.addEventListener(
-      'syn-after-hide',
-      (e: SynAfterHideEvent) => {
-        this.synAfterHideEvent.emit(e);
-      },
-    );
-  }
-
-  /**
-* Indicates whether or not the alert is open.
-* You can toggle this attribute to show and hide the alert, or you can
-use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
- */
-  @Input()
-  set open(v: '' | SynAlert['open']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.open = v === '' || v),
-    );
-  }
-  get open(): SynAlert['open'] {
-    return this.nativeElement.open;
-  }
-
-  /**
-   * Enables a close button that allows the user to dismiss the alert.
-   */
-  @Input()
-  set closable(v: '' | SynAlert['closable']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.closable = v === '' || v),
-    );
-  }
-  get closable(): SynAlert['closable'] {
-    return this.nativeElement.closable;
-  }
-
-  /**
-   * The alert's theme variant.
-   */
-  @Input()
-  set variant(v: SynAlert['variant']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
-  }
-  get variant(): SynAlert['variant'] {
-    return this.nativeElement.variant;
-  }
-
-  /**
-* The length of time, in milliseconds, the alert will show before closing itself.
-* If the user interacts with
-the alert before it closes (e.g.
-* moves the mouse over it), the timer will restart.
-* Defaults to `Infinity`, meaning
-the alert will not close on its own.
- */
-  @Input()
-  set duration(v: SynAlert['duration']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.duration = v));
-  }
-  get duration(): SynAlert['duration'] {
-    return this.nativeElement.duration;
-  }
-
-  /**
-   * The alert's size.
-   */
-  @Input()
-  set size(v: SynAlert['size']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
-  }
-  get size(): SynAlert['size'] {
-    return this.nativeElement.size;
-  }
-
-  /**
-   * Emitted when the alert opens.
-   */
-  @Output() synShowEvent = new EventEmitter<SynShowEvent>();
-
-  /**
-   * Emitted after the alert opens and all animations are complete.
-   */
-  @Output() synAfterShowEvent = new EventEmitter<SynAfterShowEvent>();
-
-  /**
-   * Emitted when the alert closes.
-   */
-  @Output() synHideEvent = new EventEmitter<SynHideEvent>();
-
-  /**
-   * Emitted after the alert closes and all animations are complete.
-   */
-  @Output() synAfterHideEvent = new EventEmitter<SynAfterHideEvent>();
-}
-
-export type { SynShowEvent } from '@synergy-design-system/components';
-export type { SynAfterShowEvent } from '@synergy-design-system/components';
-export type { SynHideEvent } from '@synergy-design-system/components';
-export type { SynAfterHideEvent } from '@synergy-design-system/components';

package/metadata/packages/components/components/syn-alert/component.react.ts

@@ -1,60 +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/alert/alert.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynShowEvent } from '@synergy-design-system/components';
-import type { SynAfterShowEvent } from '@synergy-design-system/components';
-import type { SynHideEvent } from '@synergy-design-system/components';
-import type { SynAfterHideEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-alert';
-Component.define('syn-alert');
-
-/**
- * @summary Alerts are used to display important messages inline or as toast notifications.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon-button
- *
- * @slot - The alert's main content.
- * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
- *
- * @event syn-show - Emitted when the alert opens.
- * @event syn-after-show - Emitted after the alert opens and all animations are complete.
- * @event syn-hide - Emitted when the alert closes.
- * @event syn-after-hide - Emitted after the alert closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper.
- * @csspart icon - The container that wraps the optional icon.
- * @csspart message - The container that wraps the alert's main content.
- * @csspart close-button - The close button, an `<syn-icon-button>`.
- * @csspart close-button__base - The close button's exported `base` part.
- *
- * @animation alert.show - The animation to use when showing the alert.
- * @animation alert.hide - The animation to use when hiding the alert.
- */
-export const SynAlert = createComponent({
-  displayName: 'SynAlert',
-  elementClass: Component,
-  events: {
-    onSynShow: 'syn-show' as EventName<SynShowEvent>,
-    onSynAfterShow: 'syn-after-show' as EventName<SynAfterShowEvent>,
-    onSynHide: 'syn-hide' as EventName<SynHideEvent>,
-    onSynAfterHide: 'syn-after-hide' as EventName<SynAfterHideEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynShowEvent } from '@synergy-design-system/components';
-export type { SynAfterShowEvent } from '@synergy-design-system/components';
-export type { SynHideEvent } from '@synergy-design-system/components';
-export type { SynAfterHideEvent } from '@synergy-design-system/components';