@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,90 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import { property, query, state } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import styles from './progress-ring.styles.js';
+import customStyles from './progress-ring.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @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 default class SynProgressRing extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+
+  private readonly localize = new LocalizeController(this);
+
+  @query('.progress-ring__indicator') indicator: SVGCircleElement;
+
+  @state() indicatorOffset: string;
+
+  /** The current progress as a percentage, 0 to 100. */
+  @property({ type: Number, reflect: true }) value = 0;
+
+  /** A custom label for assistive devices. */
+  @property() label = '';
+
+  updated(changedProps: Map<string, unknown>) {
+    super.updated(changedProps);
+
+    //
+    // This block is only required for Safari because it doesn't transition the circle when the custom properties
+    // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,
+    // but I couldn't pinpoint it so this works around the problem.
+    //
+    if (changedProps.has('value')) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - (this.value / 100) * circumference;
+
+      this.indicatorOffset = `${offset}px`;
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style="--percentage: ${this.value / 100}"
+      >
+        <svg class="progress-ring__image">
+          <circle class="progress-ring__track"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+        </svg>
+
+        <slot id="label" part="label" class="progress-ring__label"></slot>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,66 @@
+<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 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.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/progress-ring/progress-ring.js';
+
+import type { SynProgressRing } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynProgressRing>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * The current progress as a percentage, 0 to 100.
+   */
+  value?: SynProgressRing['value'];
+
+  /**
+   * A custom label for assistive devices.
+   */
+  label?: SynProgressRing['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-ring v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
+  </syn-progress-ring>
+</template>

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

@@ -0,0 +1,109 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynRadio } 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/radio/radio.js';
+
+/**
+ * @summary Radios allow the user to select a single option from a group.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The radio's label.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-focus - Emitted when the control gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The circular container that wraps the radio's checked state.
+ * @csspart control--checked - The radio control when the radio is checked.
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart label - The container that wraps the radio's label.
+ */
+@Component({
+  selector: 'syn-radio',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynRadioComponent {
+  public nativeElement: SynRadio;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+    this.nativeElement.addEventListener('syn-blur', (e: SynBlurEvent) => {
+      this.synBlurEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-focus', (e: SynFocusEvent) => {
+      this.synFocusEvent.emit(e);
+    });
+  }
+
+  /**
+   * The radio's value.
+   * When selected, the radio group will receive this value.
+   */
+  @Input()
+  set value(v: SynRadio['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynRadio['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+* The radio's size.
+* When used inside a radio group, the size will be determined by the radio group's size so this
+attribute can typically be omitted.
+ */
+  @Input()
+  set size(v: SynRadio['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynRadio['size'] {
+    return this.nativeElement.size;
+  }
+
+  /**
+   * Disables the radio.
+   */
+  @Input()
+  set disabled(v: '' | SynRadio['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynRadio['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * Emitted when the control loses focus.
+   */
+  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
+
+  /**
+   * Emitted when the control gains focus.
+   */
+  @Output() synFocusEvent = new EventEmitter<SynFocusEvent>();
+}
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';

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

@@ -0,0 +1,73 @@
+import { css } from 'lit';
+
+export default css`
+  :host(:focus-visible) .radio__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-width);
+  }
+
+  /** #429: Use token for opacity */
+  .radio--disabled { 
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  /* Checked + hover */
+  .radio.radio--checked:not(.radio--disabled):hover  .radio__control {
+    background-color: var(--syn-color-primary-950);
+    border-color: var(--syn-color-primary-950);
+  }
+
+  /* Hover */
+  .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {
+    border-color: var(--syn-color-primary-900);
+  }
+
+  /* Fix#456: Multi line radio fixes */
+  .radio__label {
+    margin-inline-start: var(--syn-spacing-x-small);
+    position: relative;
+  }
+
+  .radio--small .radio__label {
+    font: var(--syn-body-small-regular);
+    top: -3px;
+  }
+
+  .radio--medium .radio__label {
+    font: var(--syn-body-medium-regular);
+    top: -3px;
+  }
+
+  .radio--large .radio__label {
+    font: var(--syn-body-large-regular);
+    top: -2px;
+  }
+
+  /**
+   * #920: The new icons are instances in figma.
+   * The width of the system icon is 12px x 12px, so there is no inner padding.
+   * To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before.
+   */
+  .radio__checked-icon {
+    scale: 0.5;
+  }
+
+  /* /Fix#456 */
+
+  /* Size modifiers */
+  .radio--small {
+    --toggle-size: var(--syn-input-font-size-small);
+  }
+
+  .radio--medium {
+    --toggle-size: var(--syn-font-size-medium);
+  }
+
+  .radio--large {
+    --toggle-size: var(--syn-spacing-large);
+  }
+
+  .radio--small .radio__label, .radio--large .radio__label  {
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+`;

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

@@ -0,0 +1,48 @@
+// ---------------------------------------------------------------------
+// 🔒 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/radio/radio.component.js';
+
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+
+const tagName = 'syn-radio';
+Component.define('syn-radio');
+
+/**
+ * @summary Radios allow the user to select a single option from a group.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The radio's label.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-focus - Emitted when the control gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The circular container that wraps the radio's checked state.
+ * @csspart control--checked - The radio control when the radio is checked.
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart label - The container that wraps the radio's label.
+ */
+export const SynRadio = createComponent({
+  displayName: 'SynRadio',
+  elementClass: Component,
+  events: {
+    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,
+    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';

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

@@ -0,0 +1,124 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 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 {
+    display: block;
+  }
+
+  :host(:focus-visible) {
+    outline: 0px;
+  }
+
+  .radio {
+    display: inline-flex;
+    align-items: top;
+    font-family: var(--syn-input-font-family);
+    font-size: var(--syn-input-font-size-medium);
+    font-weight: var(--syn-input-font-weight);
+    color: var(--syn-input-label-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .radio--small {
+    --toggle-size: var(--syn-toggle-size-small);
+    font-size: var(--syn-input-font-size-small);
+  }
+
+  .radio--medium {
+    --toggle-size: var(--syn-toggle-size-medium);
+    font-size: var(--syn-input-font-size-medium);
+  }
+
+  .radio--large {
+    --toggle-size: var(--syn-toggle-size-large);
+    font-size: var(--syn-input-font-size-large);
+  }
+
+  .radio__checked-icon {
+    display: inline-flex;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+  }
+
+  .radio__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
+    border-radius: 50%;
+    background-color: var(--syn-input-background-color);
+    color: transparent;
+    transition:
+      var(--syn-transition-fast) border-color,
+      var(--syn-transition-fast) background-color,
+      var(--syn-transition-fast) color,
+      var(--syn-transition-fast) box-shadow;
+  }
+
+  .radio__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
+    border-color: var(--syn-input-border-color-hover);
+    background-color: var(--syn-input-background-color-hover);
+  }
+
+  /* Checked */
+  .radio--checked .radio__control {
+    color: var(--syn-color-neutral-0);
+    border-color: var(--syn-color-primary-600);
+    background-color: var(--syn-color-primary-600);
+  }
+
+  /* Checked + hover */
+  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
+    border-color: var(--syn-color-primary-500);
+    background-color: var(--syn-color-primary-500);
+  }
+
+  /* Checked + focus */
+  :host(:focus-visible) .radio__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  /* Disabled */
+  .radio--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
+  .radio:not(.radio--checked) svg circle {
+    opacity: 0;
+  }
+
+  .radio__label {
+    display: inline-block;
+    color: var(--syn-input-label-color);
+    line-height: var(--toggle-size);
+    margin-inline-start: 0.5em;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;

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

@@ -0,0 +1,129 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 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 { property, state } from 'lit/decorators.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 styles from './radio.styles.js';
+import customStyles from './radio.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
+
+/**
+ * @summary Radios allow the user to select a single option from a group.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The radio's label.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-focus - Emitted when the control gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The circular container that wraps the radio's checked state.
+ * @csspart control--checked - The radio control when the radio is checked.
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart label - The container that wraps the radio's label.
+ */
+@enableDefaultSettings('SynRadio')
+export default class SynRadio extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static dependencies = { 'syn-icon': SynIcon };
+
+  @state() checked = false;
+  @state() protected hasFocus = false;
+
+  /** The radio's value. When selected, the radio group will receive this value. */
+  @property() value: string | number;
+
+  /**
+   * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+   * attribute can typically be omitted.
+   */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Disables the radio. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  constructor() {
+    super();
+    this.addEventListener('blur', this.handleBlur);
+    this.addEventListener('click', this.handleClick);
+    this.addEventListener('focus', this.handleFocus);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setInitialAttributes();
+  }
+
+  private handleBlur = () => {
+    this.hasFocus = false;
+    this.emit('syn-blur');
+  };
+
+  private handleClick = () => {
+    if (!this.disabled) {
+      this.checked = true;
+    }
+  };
+
+  private handleFocus = () => {
+    this.hasFocus = true;
+    this.emit('syn-focus');
+  };
+
+  private setInitialAttributes() {
+    this.setAttribute('role', 'radio');
+    this.setAttribute('tabindex', '-1');
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  @watch('checked')
+  handleCheckedChange() {
+    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    this.setAttribute('tabindex', this.checked ? '0' : '-1');
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+          radio: true,
+          'radio--checked': this.checked,
+          'radio--disabled': this.disabled,
+          'radio--focused': this.hasFocus,
+          'radio--small': this.size === 'small',
+          'radio--medium': this.size === 'medium',
+          'radio--large': this.size === 'large'
+        })}
+      >
+        <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">
+          ${this.checked
+            ? html` <syn-icon part="checked-icon" class="radio__checked-icon" library="system" name="radio"></syn-icon> `
+            : ''}
+        </span>
+
+        <slot part="label" class="radio__label"></slot>
+      </span>
+    `;
+  }
+}