@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,318 +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 { SynButton } from '@synergy-design-system/components';
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-import type { SynInvalidEvent } from '@synergy-design-system/components';
-import '@synergy-design-system/components/components/button/button.js';
-
-/**
- * @summary Buttons represent actions that are available to the user.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- * @dependency syn-spinner
- *
- * @event syn-blur - Emitted when the button loses focus.
- * @event syn-focus - Emitted when the button gains focus.
- * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- *
- * @slot - The button's label.
- * @slot prefix - A presentational prefix icon or similar element.
- * @slot suffix - A presentational suffix icon or similar element.
- *
- * @csspart base - The component's base wrapper.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart label - The button's label.
- * @csspart suffix - The container that wraps the suffix.
- * @csspart caret - The button's caret icon, an `<syn-icon>` element.
- * @csspart spinner - The spinner that shows when the button is in the loading state.
- */
-@Component({
-  selector: 'syn-button',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynButtonComponent {
-  public nativeElement: SynButton;
-  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);
-    });
-    this.nativeElement.addEventListener('syn-invalid', (e: SynInvalidEvent) => {
-      this.synInvalidEvent.emit(e);
-    });
-  }
-
-  @Input()
-  set title(v: SynButton['title']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.title = v));
-  }
-  get title(): SynButton['title'] {
-    return this.nativeElement.title;
-  }
-
-  /**
-   * The button's theme variant.
-   */
-  @Input()
-  set variant(v: SynButton['variant']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
-  }
-  get variant(): SynButton['variant'] {
-    return this.nativeElement.variant;
-  }
-
-  /**
-   * The button's size.
-   */
-  @Input()
-  set size(v: SynButton['size']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
-  }
-  get size(): SynButton['size'] {
-    return this.nativeElement.size;
-  }
-
-  /**
-   * Draws the button with a caret.
-   * Used to indicate that the button triggers a dropdown menu or similar behavior.
-   */
-  @Input()
-  set caret(v: '' | SynButton['caret']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.caret = v === '' || v),
-    );
-  }
-  get caret(): SynButton['caret'] {
-    return this.nativeElement.caret;
-  }
-
-  /**
-   * Disables the button.
-   */
-  @Input()
-  set disabled(v: '' | SynButton['disabled']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.disabled = v === '' || v),
-    );
-  }
-  get disabled(): SynButton['disabled'] {
-    return this.nativeElement.disabled;
-  }
-
-  /**
-   * Draws the button in a loading state.
-   */
-  @Input()
-  set loading(v: '' | SynButton['loading']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.loading = v === '' || v),
-    );
-  }
-  get loading(): SynButton['loading'] {
-    return this.nativeElement.loading;
-  }
-
-  /**
-* The type of button.
-* Note that the default value is `button` instead of `submit`, which is opposite of how native
-`<button>` elements behave.
-* When the type is `submit`, the button will submit the surrounding form.
- */
-  @Input()
-  set type(v: SynButton['type']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.type = v));
-  }
-  get type(): SynButton['type'] {
-    return this.nativeElement.type;
-  }
-
-  /**
-* The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
-This attribute is ignored when `href` is present.
- */
-  @Input()
-  set name(v: SynButton['name']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
-  }
-  get name(): SynButton['name'] {
-    return this.nativeElement.name;
-  }
-
-  /**
-* The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
-button is the submitter.
-* This attribute is ignored when `href` is present.
- */
-  @Input()
-  set value(v: SynButton['value']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
-  }
-  get value(): SynButton['value'] {
-    return this.nativeElement.value;
-  }
-
-  /**
-   * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
-   */
-  @Input()
-  set href(v: SynButton['href']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.href = v));
-  }
-  get href(): SynButton['href'] {
-    return this.nativeElement.href;
-  }
-
-  /**
-   * Tells the browser where to open the link.
-   * Only used when `href` is present.
-   */
-  @Input()
-  set target(v: SynButton['target']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.target = v));
-  }
-  get target(): SynButton['target'] {
-    return this.nativeElement.target;
-  }
-
-  /**
-* When using `href`, this attribute will map to the underlying link's `rel` attribute.
-* Unlike regular links, the
-default is `noreferrer noopener` to prevent security exploits.
-* However, if you're using `target` to point to a
-specific tab/window, this will prevent that from working correctly.
-* You can remove or change the default value by
-setting the attribute to an empty string or a value of your choice, respectively.
- */
-  @Input()
-  set rel(v: SynButton['rel']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.rel = v));
-  }
-  get rel(): SynButton['rel'] {
-    return this.nativeElement.rel;
-  }
-
-  /**
-   * Tells the browser to download the linked file as this filename.
-   * Only used when `href` is present.
-   */
-  @Input()
-  set download(v: SynButton['download']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.download = v));
-  }
-  get download(): SynButton['download'] {
-    return this.nativeElement.download;
-  }
-
-  /**
-* The "form owner" to associate the button with.
-* If omitted, the closest containing form will be used instead.
-* The
-value of this attribute must be an id of a form in the same document or shadow root as the button.
- */
-  @Input()
-  set form(v: SynButton['form']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.form = v));
-  }
-  get form(): SynButton['form'] {
-    return this.nativeElement.form;
-  }
-
-  /**
-   * Used to override the form owner's `action` attribute.
-   */
-  @Input()
-  set formAction(v: SynButton['formAction']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.formAction = v));
-  }
-  get formAction(): SynButton['formAction'] {
-    return this.nativeElement.formAction;
-  }
-
-  /**
-   * Used to override the form owner's `enctype` attribute.
-   */
-  @Input()
-  set formEnctype(v: SynButton['formEnctype']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.formEnctype = v));
-  }
-  get formEnctype(): SynButton['formEnctype'] {
-    return this.nativeElement.formEnctype;
-  }
-
-  /**
-   * Used to override the form owner's `method` attribute.
-   */
-  @Input()
-  set formMethod(v: SynButton['formMethod']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.formMethod = v));
-  }
-  get formMethod(): SynButton['formMethod'] {
-    return this.nativeElement.formMethod;
-  }
-
-  /**
-   * Used to override the form owner's `novalidate` attribute.
-   */
-  @Input()
-  set formNoValidate(v: '' | SynButton['formNoValidate']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.formNoValidate = v === '' || v),
-    );
-  }
-  get formNoValidate(): SynButton['formNoValidate'] {
-    return this.nativeElement.formNoValidate;
-  }
-
-  /**
-   * Used to override the form owner's `target` attribute.
-   */
-  @Input()
-  set formTarget(v: SynButton['formTarget']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.formTarget = v));
-  }
-  get formTarget(): SynButton['formTarget'] {
-    return this.nativeElement.formTarget;
-  }
-
-  /**
-   * Emitted when the button loses focus.
-   */
-  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
-
-  /**
-   * Emitted when the button gains focus.
-   */
-  @Output() synFocusEvent = new EventEmitter<SynFocusEvent>();
-
-  /**
-   * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   */
-  @Output() synInvalidEvent = new EventEmitter<SynInvalidEvent>();
-}
-
-export type { SynBlurEvent } from '@synergy-design-system/components';
-export type { SynFocusEvent } from '@synergy-design-system/components';
-export type { SynInvalidEvent } from '@synergy-design-system/components';

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

@@ -1,245 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .button {
-    font-weight: var(--syn-font-weight-bold);
-  }
-
-  .button:focus-visible {
-    outline: var(--syn-focus-ring-color) solid var(--syn-focus-ring-width);
-    outline-offset: var(--syn-focus-ring-width);
-  }
-
-  /** #429: Use token for opacity */
-  .button--disabled {
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /*
-   * Adjustments for button label paddings
-   * @see https://github.com/synergy-design-system/synergy-design-system/issues/243
-   */
-  .button--has-prefix.button--small .button__label {
-    padding-inline-start: var(--syn-spacing-2x-small);
-  }
-
-  .button--has-suffix.button--small .button__label,
-  .button--caret.button--small .button__label {
-    padding-inline-end: var(--syn-spacing-2x-small);
-  }
-
-  .button--has-prefix.button--medium .button__label {
-    padding-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .button--has-suffix.button--medium .button__label,
-  .button--caret.button--medium .button__label {
-    padding-inline-end: var(--syn-spacing-x-small);
-  }
-
-  /**
-   * Icon-only buttons
-   */
-  .button--small .button__label.button__icon-only {
-    padding: 0 calc(var(--syn-spacing-x-small) + var(--syn-spacing-4x-small));
-  }
-
-  .button--small .button__label::slotted(syn-icon) {
-    font-size: var(--syn-font-size-medium);
-    vertical-align: -3px;
-  }
-
-  .button--medium .button__label.button__icon-only {
-    padding: 0 calc(var(--syn-spacing-small) - var(--syn-spacing-4x-small));
-  }
-
-  .button--medium .button__label::slotted(syn-icon) {
-    font-size: var(--syn-font-size-x-large);
-    vertical-align: -6px;
-  }
-
-  .button--large .button__label.button__icon-only {
-    padding: 0 calc(var(--syn-spacing-medium) - var(--syn-spacing-4x-small));
-  }
-
-  .button--large .button__label::slotted(syn-icon) {
-    font-size: var(--syn-font-size-2x-large);
-    vertical-align: -8px;
-  }
-
-  /**
-   * Size modifiers
-   */
-  .button--small {
-    border-radius: var(--syn-button-border-radius-small);
-  }
-
-  .button--medium {
-    border-radius: var(--syn-button-border-radius-medium);
-  }
-
-  .button--large {
-    border-radius: var(--syn-button-border-radius-large);
-  }
-
-  /*
-   * Standard buttons
-   */
-  .button--filled.button--primary {
-    background: var(--syn-button-color);
-    border-color: var(--syn-button-color);
-    color: var(--syn-button-filled-color-text);
-  }
-
-  .button--filled.button--primary.button--disabled {
-    background-color: var(--syn-color-neutral-600);
-    border-color: var(--syn-color-neutral-600);
-    color: var(--syn-typography-color-text-inverted);
-  }
-
-  .button--filled.button--primary:hover:not(.button--disabled) {
-    background-color: var(--syn-button-color-hover);
-    border-color: var(--syn-button-color-hover);
-    color: var(--syn-button-filled-color-text-hover);
-  }
-
-  .button--filled.button--primary:active:not(.button--disabled) {
-    background-color: var(--syn-button-color-active);
-    border-color: var(--syn-button-color-active);
-    color: var(--syn-button-filled-color-text-active);
-  }
-
-  /*
-   * Outline buttons
-   */
-  .button--outline {
-    /** #901: Use token for border width */
-    border-width: var(--syn-input-border-width);
-  }
-
-  .button--outline.button--primary {
-    border-color: var(--syn-button-color);
-    color: var(--syn-button-outline-color-text);
-  }
-
-  .button--outline.button--primary.button--disabled {
-    background: none;
-    border-color: var(--syn-color-neutral-600);
-    color: var(--syn-color-neutral-600);
-  }
-
-  .button--outline.button--primary:hover:not(.button--disabled),
-  .button--outline.button--primary.button--checked:not(.button--disabled) {
-    background-color: var(--syn-button-outline-color-hover);
-    border-color: var(--syn-button-outline-color-hover);
-    color: var(--syn-button-outline-color-text-hover);
-  }
-
-  .button--outline.button--primary:active:not(.button--disabled) {
-    background-color: var(--syn-button-outline-color-active);
-    border-color: var(--syn-button-outline-color-active);
-    color: var(--syn-button-outline-color-text-active);
-  }
-
-  /*
-   * Text buttons
-   */
-  .button--text {
-    color: var(--syn-button-text-color-text);
-  }
-
-  .button--text:hover:not(.button--disabled) {
-    color: var(--syn-button-text-color-text-hover);
-  }
-
-  .button--text:focus-visible:not(.button--disabled) {
-    color: var(--syn-button-color);
-  }
-
-  .button--text.button--primary:active:not(.button--disabled) {
-    color: var(--syn-button-text-color-text-active);
-  }
-
-  .button--text.button--primary.button--disabled {
-    color: var(--syn-color-neutral-600);
-  }
-
-  /**
-   * Button spacing
-   */
-  .button.button--small.button--has-label.button--has-prefix {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button.button--small.button--has-label.button--has-suffix {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  .button.button--small.button--has-prefix .button__prefix, 
-  .button.button--small.button--has-suffix .button__suffix {
-    font-size: var(--syn-spacing-medium);
-  }
-
-  .button.button--medium.button--has-label.button--has-prefix {
-    padding-inline-start: var(--syn-spacing-medium);
-  } 
-
-  .button.button--medium.button--has-label.button--has-suffix {
-    padding-inline-end: var(--syn-spacing-medium);
-  }
-
-  .button.button--medium.button--has-prefix .button__prefix, 
-  .button.button--medium.button--has-suffix .button__suffix {
-    font-size: var(--syn-spacing-large);
-  }
-
-  .button.button--large.button--has-label.button--has-prefix {
-    padding-inline-start: var(--syn-spacing-large);
-  }
-
-  .button.button--large.button--has-label.button--has-prefix .button__label {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button.button--large.button--has-label.button--has-suffix {
-    padding-inline-end: var(--syn-spacing-large);
-  }
-
-  .button.button--large.button--has-label.button--has-suffix .button__label {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  .button.button--large.button--has-prefix .button__prefix, 
-  .button.button--large.button--has-suffix .button__suffix {
-    font-size: var(--syn-font-size-2x-large);
-  }
-
-  /*
-   * Caret modifier
-   */
-  .button--caret.button--small .button__caret{
-    font-size: var(--syn-font-size-medium);
-  }
-
-  .button--caret.button--medium .button__caret{
-    font-size: var(--syn-font-size-x-large);
-  }
-
-  .button--caret.button--large .button__caret{
-    font-size: var(--syn-font-size-2x-large);
-  }
-
-  /* #392: Button Groups */
-  :host([data-syn-button-group__button--inner]) .button--filled.button {
-    border-left-color: var(--syn-panel-background-color);
-    border-right-color: var(--syn-panel-background-color);
-  }
-
-  :host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button--filled.button {
-    border-right-color: var(--syn-panel-background-color);
-  }
-
-  :host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button--filled.button {
-    border-left-color: var(--syn-panel-background-color);
-  }
-`;

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

@@ -1,56 +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/button/button.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-import type { SynInvalidEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-button';
-Component.define('syn-button');
-
-/**
- * @summary Buttons represent actions that are available to the user.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- * @dependency syn-spinner
- *
- * @event syn-blur - Emitted when the button loses focus.
- * @event syn-focus - Emitted when the button gains focus.
- * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- *
- * @slot - The button's label.
- * @slot prefix - A presentational prefix icon or similar element.
- * @slot suffix - A presentational suffix icon or similar element.
- *
- * @csspart base - The component's base wrapper.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart label - The button's label.
- * @csspart suffix - The container that wraps the suffix.
- * @csspart caret - The button's caret icon, an `<syn-icon>` element.
- * @csspart spinner - The spinner that shows when the button is in the loading state.
- */
-export const SynButton = createComponent({
-  displayName: 'SynButton',
-  elementClass: Component,
-  events: {
-    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,
-    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,
-    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynBlurEvent } from '@synergy-design-system/components';
-export type { SynFocusEvent } from '@synergy-design-system/components';
-export type { SynInvalidEvent } from '@synergy-design-system/components';