@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,83 +0,0 @@
-/* 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

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

@@ -1,122 +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 { 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;
-  }
-
-  /**
-   * Sets the radio to a readonly state.
-   */
-  @Input()
-  set readonly(v: '' | SynRadio['readonly']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.readonly = v === '' || v),
-    );
-  }
-  get readonly(): SynRadio['readonly'] {
-    return this.nativeElement.readonly;
-  }
-
-  /**
-   * 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.react.ts

@@ -1,48 +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/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

@@ -1,179 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* stylelint-disable no-descending-specificity */
-  :host {
-    display: block;
-  }
-
-  :host(:focus-visible) {
-    outline: 0;
-  }
-
-  .radio {
-    align-items: flex-start;
-    color: var(--syn-input-label-color);
-    cursor: pointer;
-    display: inline-flex;
-    font-family: var(--syn-input-font-family);
-    font-size: var(--syn-input-font-size-medium);
-    font-weight: var(--syn-input-font-weight);
-    vertical-align: middle;
-  }
-
-  .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;
-    height: var(--toggle-size);
-
-    /**
-     * #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.
-     */
-    scale: 0.5;
-    width: var(--toggle-size);
-
-  }
-
-  .radio__control {
-    align-items: center;
-    background-color: var(--syn-input-background-color);
-    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
-    border-radius: 50%;
-    color: transparent;
-    display: inline-flex;
-    flex: 0 0 auto;
-    height: var(--toggle-size);
-    justify-content: center;
-    position: relative;
-    transition:
-      var(--syn-transition-fast) border-color,
-      var(--syn-transition-fast) background-color,
-      var(--syn-transition-fast) color,
-      var(--syn-transition-fast) box-shadow;
-    width: var(--toggle-size);
-  }
-
-  .radio__input {
-    margin: 0;
-    opacity: 0;
-    padding: 0;
-    pointer-events: none;
-    position: absolute;
-  }
-
-  /* Hover */
-  .radio:not(.radio--checked):not(.radio--disabled):not(.radio--readonly):hover .radio__control {
-    border-color: var(--syn-input-border-color-hover);
-  }
-
-  /* Checked */
-  .radio--checked .radio__control {
-    background-color: var(--syn-interactive-emphasis-color);
-    border-color: var(--syn-interactive-emphasis-color);
-    color: var(--syn-color-neutral-0);
-  }
-
-  /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled):not(.radio--readonly):hover .radio__control {
-    background-color: var(--syn-interactive-emphasis-color-hover);
-    border-color: var(--syn-interactive-emphasis-color-hover);
-  }
-
-  /* Checked + active */
-  .radio.radio--checked:not(.radio--disabled):not(.radio--readonly):active .radio__control {
-    background-color: var(--syn-interactive-emphasis-color-active);
-    border-color: var(--syn-interactive-emphasis-color-active);
-  }
-
-  /* Not-Checked + active */
-  .radio:not(.radio--checked):not(.radio--disabled):not(.radio--readonly):active .radio__control {
-    border-color: var(--syn-input-border-color-active);
-  }
-
-  /* Checked + focus */
-  :host(:focus-visible) .radio__control {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-width);
-  }
-
-  .radio--disabled {
-    cursor: not-allowed;
-
-    /** #429: Use token for opacity */
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
-  .radio:not(.radio--checked) svg circle {
-    opacity: 0;
-  }
-
-  /* Fix#456: Multi line radio fixes */
-  .radio__label {
-    align-self: center;
-    color: var(--syn-input-label-color);
-    display: inline-block;
-    line-height: var(--toggle-size);
-    margin-inline-start: var(--syn-spacing-x-small);
-    margin-top: -1px;
-    user-select: none;
-  }
-
-  .radio--small .radio__label {
-    font: var(--syn-body-small-regular);
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .radio--medium .radio__label {
-    font: var(--syn-body-medium-regular);
-  }
-
-  .radio--large .radio__label {
-    font: var(--syn-body-large-regular);
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-
-  /* /Fix#456 */
-
-  /**
-   * #1174: Readonly state
-   */
-  .radio.radio--readonly {
-    cursor: default;
-  }
-
-  .radio.radio--readonly .radio__label {
-    user-select: auto;
-  }
-
-  .radio.radio--readonly .radio__control {
-    background: var(--syn-input-readonly-background-color);
-    border-color: var(--syn-input-readonly-background-color);
-    color: var(--syn-readonly-indicator-color);
-    cursor: default;
-  }
-
-  :host(:focus) .radio--readonly .radio__control {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-width);
-  }
-`;

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

@@ -1,131 +0,0 @@
-import { classMap } from 'lit/directives/class-map.js';
-import { html } from 'lit';
-import type { CSSResultGroup } 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 { 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];
-
-  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({ reflect: true, type: Boolean }) disabled = false;
-
-  /** Sets the radio to a readonly state. */
-  @property({ reflect: true, type: Boolean }) readonly = 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.readonly) {
-      this.focus();
-      return;
-    }
-
-    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 || this.readonly) ? 'true' : 'false');
-  }
-
-  @watch('checked')
-  handleCheckedChange() {
-    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-    this.setAttribute('tabindex', this.checked ? '0' : '-1');
-  }
-
-  @watch(['disabled', 'readonly'], { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    this.setAttribute('aria-disabled', (this.disabled || this.readonly) ? '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--large': this.size === 'large',
-          'radio--medium': this.size === 'medium',
-          'radio--readonly': this.readonly,
-          'radio--small': this.size === 'small',
-        })}
-      >
-        <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>
-    `;
-  }
-}