@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,60 @@
+<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

@@ -0,0 +1,85 @@
+// ---------------------------------------------------------------------
+// 🔒 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

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --height: var(--syn-font-size-medium);
+    --speed: 2.5s;
+  }
+
+  .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

@@ -0,0 +1,37 @@
+// ---------------------------------------------------------------------
+// 🔒 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

@@ -0,0 +1,94 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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

@@ -0,0 +1,74 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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

@@ -0,0 +1,71 @@
+<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

@@ -0,0 +1,72 @@
+// ---------------------------------------------------------------------
+// 🔒 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

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --size: 120px;
+    --track-width: var(--syn-spacing-x-small);
+  }
+
+  .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

@@ -0,0 +1,37 @@
+// ---------------------------------------------------------------------
+// 🔒 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

@@ -0,0 +1,77 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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;
+  }
+`;