@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/packages/components/components/syn-prio-nav/component.vue

@@ -1,60 +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 The `<syn-prio-nav />` element provides a generic navigation bar
- * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)
- * together. It will automatically group all items not visible in the viewport into a custom
- * priority menu.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
- * @example
- * <syn-prio-nav>
- *  <syn-nav-item current horizontal>Item 1</syn-nav-item>
- *  <button role="menuitem">Item 2 (custom)</button>
- *  <syn-nav-item horizontal>Item 3</syn-nav-item>
- * </syn-prio-nav>
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
- * @status stable
- * @since 1.14.0
- *
- * @dependency syn-dropdown
- * @dependency syn-icon
- * @dependency syn-menu
- * @dependency syn-nav-item
- *
- * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s
- *    or have a role of "menuitem"
- *
- * @csspart base - The component's base wrapper.
- * @csspart priority-menu - The wrapper around the priority menu
- * @csspart priority-menu-nav-item - The navigation item for the priority menu
- * @csspart priority-menu-label - The label for the priority menu
- * @csspart priority-menu-icon - The icon for the priority menu
- * @csspart priority-menu-container - The container for the shifted navigation items,
- *    if there is not enough space.
- *
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/prio-nav/prio-nav.js';
-
-import type { SynPrioNav } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynPrioNav>();
-
-defineExpose({
-  nativeElement,
-});
-</script>
-
-<template>
-  <syn-prio-nav ref="nativeElement">
-    <slot></slot>
-  </syn-prio-nav>
-</template>

package/metadata/packages/components/components/syn-progress-bar/component.angular.ts

@@ -1,85 +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 { SynProgressBar } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/progress-bar/progress-bar.js';
-
-/**
- * @summary Progress bars are used to show the status of an ongoing operation.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
- * @status stable
- * @since 2.0
- *
- * @slot - A label to show inside the progress indicator.
- *
- * @csspart base - The component's base wrapper.
- * @csspart indicator - The progress bar's indicator.
- * @csspart label - The progress bar's label.
- *
- * @cssproperty --height - The progress bar's height.
- * @cssproperty --track-color - The color of the track.
- * @cssproperty --indicator-color - The color of the indicator.
- * @cssproperty --label-color - The color of the label.
- * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
- */
-@Component({
-  selector: 'syn-progress-bar',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynProgressBarComponent {
-  public nativeElement: SynProgressBar;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-   * The current progress as a percentage, 0 to 100.
-   */
-  @Input()
-  set value(v: SynProgressBar['value']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
-  }
-  get value(): SynProgressBar['value'] {
-    return this.nativeElement.value;
-  }
-
-  /**
-   * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
-   */
-  @Input()
-  set indeterminate(v: '' | SynProgressBar['indeterminate']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.indeterminate = v === '' || v),
-    );
-  }
-  get indeterminate(): SynProgressBar['indeterminate'] {
-    return this.nativeElement.indeterminate;
-  }
-
-  /**
-   * A custom label for assistive devices.
-   */
-  @Input()
-  set label(v: SynProgressBar['label']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
-  }
-  get label(): SynProgressBar['label'] {
-    return this.nativeElement.label;
-  }
-}

package/metadata/packages/components/components/syn-progress-bar/component.custom.styles.ts

@@ -1,24 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --height: var(--syn-font-size-medium);
-    --speed: 2.5s;
-    --indicator-color: var(--syn-progress-indicator-color);
-    --track-color: var(--syn-progress-track-color);
-  }
-
-  .progress-bar {
-    border-radius: var(--syn-border-radius-none);
-    box-shadow: none;
-  }
-
-  .progress-bar__indicator {
-    font: var(--syn-body-x-small-bold);
-  }
-
-  /* Indeterminate */
-  .progress-bar--indeterminate .progress-bar__indicator {
-    animation-duration: var(--speed);
-  }
-`;

package/metadata/packages/components/components/syn-progress-bar/component.react.ts

@@ -1,37 +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/progress-bar/progress-bar.component.js';
-
-const tagName = 'syn-progress-bar';
-Component.define('syn-progress-bar');
-
-/**
- * @summary Progress bars are used to show the status of an ongoing operation.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
- * @status stable
- * @since 2.0
- *
- * @slot - A label to show inside the progress indicator.
- *
- * @csspart base - The component's base wrapper.
- * @csspart indicator - The progress bar's indicator.
- * @csspart label - The progress bar's label.
- *
- * @cssproperty --height - The progress bar's height.
- * @cssproperty --track-color - The color of the track.
- * @cssproperty --indicator-color - The color of the indicator.
- * @cssproperty --label-color - The color of the label.
- * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
- */
-export const SynProgressBar = createComponent({
-  displayName: 'SynProgressBar',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

package/metadata/packages/components/components/syn-progress-bar/component.styles.ts

@@ -1,87 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-	/* stylelint-disable */
-  :host {
-    --height: 1rem;
-    --track-color: var(--syn-color-neutral-200);
-    --indicator-color: var(--syn-color-primary-600);
-    --label-color: var(--syn-color-neutral-0);
-
-    display: block;
-  }
-
-  .progress-bar {
-    position: relative;
-    background-color: var(--track-color);
-    height: var(--height);
-    border-radius: var(--syn-border-radius-pill);
-    box-shadow: inset var(--syn-shadow-small);
-    overflow: hidden;
-  }
-
-  .progress-bar__indicator {
-    height: 100%;
-    font-family: var(--syn-font-sans);
-    font-size: 12px;
-    font-weight: var(--syn-font-weight-normal);
-    background-color: var(--indicator-color);
-    color: var(--label-color);
-    text-align: center;
-    line-height: var(--height);
-    white-space: nowrap;
-    overflow: hidden;
-    transition:
-      400ms width,
-      400ms background-color;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  /* Indeterminate */
-  .progress-bar--indeterminate .progress-bar__indicator {
-    position: absolute;
-    animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
-  }
-
-  .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
-    animation-name: indeterminate-rtl;
-  }
-
-  @media (forced-colors: active) {
-    .progress-bar {
-      outline: solid 1px SelectedItem;
-      background-color: var(--syn-color-neutral-0);
-    }
-
-    .progress-bar__indicator {
-      outline: solid 1px SelectedItem;
-      background-color: SelectedItem;
-    }
-  }
-
-  @keyframes indeterminate {
-    0% {
-      left: -50%;
-      width: 50%;
-    }
-    75%,
-    100% {
-      left: 100%;
-      width: 50%;
-    }
-  }
-
-  @keyframes indeterminate-rtl {
-    0% {
-      right: -50%;
-      width: 50%;
-    }
-    75%,
-    100% {
-      right: 100%;
-      width: 50%;
-    }
-  }
-`;

package/metadata/packages/components/components/syn-progress-bar/component.ts

@@ -1,67 +0,0 @@
-/* eslint-disable */
-import { classMap } from 'lit/directives/class-map.js';
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { LocalizeController } from '../../utilities/localize.js';
-import { property } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import componentStyles from '../../styles/component.styles.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import styles from './progress-bar.styles.js';
-import customStyles from './progress-bar.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
-
-/**
- * @summary Progress bars are used to show the status of an ongoing operation.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
- * @status stable
- * @since 2.0
- *
- * @slot - A label to show inside the progress indicator.
- *
- * @csspart base - The component's base wrapper.
- * @csspart indicator - The progress bar's indicator.
- * @csspart label - The progress bar's label.
- *
- * @cssproperty --height - The progress bar's height.
- * @cssproperty --track-color - The color of the track.
- * @cssproperty --indicator-color - The color of the indicator.
- * @cssproperty --label-color - The color of the label.
- * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
- */
-export default class SynProgressBar extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
-  private readonly localize = new LocalizeController(this);
-
-  /** The current progress as a percentage, 0 to 100. */
-  @property({ type: Number, reflect: true }) value = 0;
-
-  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  @property({ type: Boolean, reflect: true }) indeterminate = false;
-
-  /** A custom label for assistive devices. */
-  @property() label = '';
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          'progress-bar': true,
-          'progress-bar--indeterminate': this.indeterminate,
-          'progress-bar--rtl': this.localize.dir() === 'rtl'
-        })}
-        role="progressbar"
-        title=${ifDefined(this.title)}
-        aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow=${this.indeterminate ? 0 : this.value}
-      >
-        <div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: `${this.value}%` })}>
-          ${!this.indeterminate ? html` <slot part="label" class="progress-bar__label"></slot> ` : ''}
-        </div>
-      </div>
-    `;
-  }
-}

package/metadata/packages/components/components/syn-progress-bar/component.vue

@@ -1,71 +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 Progress bars are used to show the status of an ongoing operation.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
- * @status stable
- * @since 2.0
- *
- * @slot - A label to show inside the progress indicator.
- *
- * @csspart base - The component's base wrapper.
- * @csspart indicator - The progress bar's indicator.
- * @csspart label - The progress bar's label.
- *
- * @cssproperty --height - The progress bar's height.
- * @cssproperty --track-color - The color of the track.
- * @cssproperty --indicator-color - The color of the indicator.
- * @cssproperty --label-color - The color of the label.
- * @cssproperty --speed - The speed of the progress bar when in indeterminate state.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/progress-bar/progress-bar.js';
-
-import type { SynProgressBar } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynProgressBar>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-   * The current progress as a percentage, 0 to 100.
-   */
-  value?: SynProgressBar['value'];
-
-  /**
-   * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
-   */
-  indeterminate?: SynProgressBar['indeterminate'];
-
-  /**
-   * A custom label for assistive devices.
-   */
-  label?: SynProgressBar['label'];
-}>();
-
-// 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-progress-bar v-bind="visibleProps" ref="nativeElement">
-    <slot></slot>
-  </syn-progress-bar>
-</template>

package/metadata/packages/components/components/syn-progress-ring/component.angular.ts

@@ -1,72 +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 { SynProgressRing } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/progress-ring/progress-ring.js';
-
-/**
- * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs
- * @status stable
- * @since 2.0
- *
- * @slot - A label to show inside the ring.
- *
- * @csspart base - The component's base wrapper.
- * @csspart label - The progress ring label.
- *
- * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
- * @cssproperty --track-width - The width of the track.
- * @cssproperty --track-color - The color of the track.
- * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
- * @cssproperty --indicator-color - The color of the indicator.
- * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
- */
-@Component({
-  selector: 'syn-progress-ring',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynProgressRingComponent {
-  public nativeElement: SynProgressRing;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-   * The current progress as a percentage, 0 to 100.
-   */
-  @Input()
-  set value(v: SynProgressRing['value']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
-  }
-  get value(): SynProgressRing['value'] {
-    return this.nativeElement.value;
-  }
-
-  /**
-   * A custom label for assistive devices.
-   */
-  @Input()
-  set label(v: SynProgressRing['label']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
-  }
-  get label(): SynProgressRing['label'] {
-    return this.nativeElement.label;
-  }
-}

package/metadata/packages/components/components/syn-progress-ring/component.custom.styles.ts

@@ -1,19 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --size: 120px;
-    --track-width: var(--syn-spacing-x-small);
-    --track-color: var(--syn-progress-track-color);
-    --indicator-color: var(--syn-progress-indicator-color);
-  }
-
-  .progress-ring__indicator {
-    stroke-linecap: initial;
-  }
-
-  .progress-ring__label {
-    color: var(--syn-typography-color-text);
-    font: var(--syn-heading-x-large);
-  }
-`;

package/metadata/packages/components/components/syn-progress-ring/component.react.ts

@@ -1,37 +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/progress-ring/progress-ring.component.js';
-
-const tagName = 'syn-progress-ring';
-Component.define('syn-progress-ring');
-
-/**
- * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs
- * @status stable
- * @since 2.0
- *
- * @slot - A label to show inside the ring.
- *
- * @csspart base - The component's base wrapper.
- * @csspart label - The progress ring label.
- *
- * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
- * @cssproperty --track-width - The width of the track.
- * @cssproperty --track-color - The color of the track.
- * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
- * @cssproperty --indicator-color - The color of the indicator.
- * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
- */
-export const SynProgressRing = createComponent({
-  displayName: 'SynProgressRing',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

package/metadata/packages/components/components/syn-progress-ring/component.styles.ts

@@ -1,70 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-	/* stylelint-disable */
-  :host {
-    --size: 128px;
-    --track-width: 4px;
-    --track-color: var(--syn-color-neutral-200);
-    --indicator-width: var(--track-width);
-    --indicator-color: var(--syn-color-primary-600);
-    --indicator-transition-duration: 0.35s;
-
-    display: inline-flex;
-  }
-
-  .progress-ring {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-  }
-
-  .progress-ring__image {
-    width: var(--size);
-    height: var(--size);
-    rotate: -90deg;
-    transform-origin: 50% 50%;
-  }
-
-  .progress-ring__track,
-  .progress-ring__indicator {
-    --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
-    --circumference: calc(var(--radius) * 2 * 3.141592654);
-
-    fill: none;
-    r: var(--radius);
-    cx: calc(var(--size) / 2);
-    cy: calc(var(--size) / 2);
-  }
-
-  .progress-ring__track {
-    stroke: var(--track-color);
-    stroke-width: var(--track-width);
-  }
-
-  .progress-ring__indicator {
-    stroke: var(--indicator-color);
-    stroke-width: var(--indicator-width);
-    stroke-linecap: round;
-    transition-property: stroke-dashoffset;
-    transition-duration: var(--indicator-transition-duration);
-    stroke-dasharray: var(--circumference) var(--circumference);
-    stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
-  }
-
-  .progress-ring__label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-`;