@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,361 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-	/* stylelint-disable */
-  :host {
-    display: inline-block;
-    position: relative;
-    width: auto;
-    cursor: pointer;
-  }
-
-  .button {
-    display: inline-flex;
-    align-items: stretch;
-    justify-content: center;
-    width: 100%;
-    border-style: solid;
-    border-width: var(--syn-input-border-width);
-    font-family: var(--syn-input-font-family);
-    font-weight: var(--syn-font-weight-semibold);
-    text-decoration: none;
-    user-select: none;
-    -webkit-user-select: none;
-    white-space: nowrap;
-    vertical-align: middle;
-    padding: 0;
-    transition:
-      var(--syn-transition-x-fast) background-color,
-      var(--syn-transition-x-fast) color,
-      var(--syn-transition-x-fast) border,
-      var(--syn-transition-x-fast) box-shadow;
-    cursor: inherit;
-  }
-
-  .button::-moz-focus-inner {
-    border: 0;
-  }
-
-  .button:focus {
-    outline: none;
-  }
-
-  .button:focus-visible {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
-  }
-
-  .button--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* When disabled, prevent mouse events from bubbling up from children */
-  .button--disabled * {
-    pointer-events: none;
-  }
-
-  .button__prefix,
-  .button__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-  }
-
-  .button__label {
-    display: inline-block;
-  }
-
-  .button__label::slotted(syn-icon) {
-    vertical-align: -2px;
-  }
-
-  /*
-   * Standard buttons
-   */
-
-  /* Primary */
-  .button--filled.button--primary {
-    background-color: var(--syn-color-primary-600);
-    border-color: var(--syn-color-primary-600);
-    color: var(--syn-color-neutral-0);
-  }
-
-  .button--filled.button--primary:hover:not(.button--disabled) {
-    background-color: var(--syn-color-primary-500);
-    border-color: var(--syn-color-primary-500);
-    color: var(--syn-color-neutral-0);
-  }
-
-  .button--filled.button--primary:active:not(.button--disabled) {
-    background-color: var(--syn-color-primary-600);
-    border-color: var(--syn-color-primary-600);
-    color: var(--syn-color-neutral-0);
-  }
-
-  /*
-   * Outline buttons
-   */
-
-  .button--outline {
-    background: none;
-    border: solid 1px;
-  }
-
-  /* Primary */
-  .button--outline.button--primary {
-    border-color: var(--syn-color-primary-600);
-    color: var(--syn-color-primary-600);
-  }
-
-  .button--outline.button--primary:hover:not(.button--disabled),
-  .button--outline.button--primary.button--checked:not(.button--disabled) {
-    background-color: var(--syn-color-primary-600);
-    color: var(--syn-color-neutral-0);
-  }
-
-  .button--outline.button--primary:active:not(.button--disabled) {
-    border-color: var(--syn-color-primary-700);
-    background-color: var(--syn-color-primary-700);
-    color: var(--syn-color-neutral-0);
-  }
-
-  /*
-   * Text buttons
-   */
-
-  .button--text {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--syn-color-primary-600);
-  }
-
-  .button--text:hover:not(.button--disabled) {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--syn-color-primary-500);
-  }
-
-  .button--text:focus-visible:not(.button--disabled) {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--syn-color-primary-500);
-  }
-
-  .button--text:active:not(.button--disabled) {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--syn-color-primary-700);
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .button--small {
-    height: auto;
-    min-height: var(--syn-input-height-small);
-    font-size: var(--syn-button-font-size-small);
-    line-height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);
-    border-radius: var(--syn-input-border-radius-small);
-  }
-
-  .button--medium {
-    height: auto;
-    min-height: var(--syn-input-height-medium);
-    font-size: var(--syn-button-font-size-medium);
-    line-height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);
-    border-radius: var(--syn-input-border-radius-medium);
-  }
-
-  .button--large {
-    height: auto;
-    min-height: var(--syn-input-height-large);
-    font-size: var(--syn-button-font-size-large);
-    line-height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);
-    border-radius: var(--syn-input-border-radius-large);
-  }
-
-  /*
-   * Caret modifier
-   */
-
-  .button--caret .button__suffix {
-    display: none;
-  }
-
-  .button--caret .button__caret {
-    height: auto;
-  }
-
-  /*
-   * Loading modifier
-   */
-
-  .button--loading {
-    position: relative;
-    cursor: wait;
-  }
-
-  .button--loading .button__prefix,
-  .button--loading .button__label,
-  .button--loading .button__suffix,
-  .button--loading .button__caret {
-    visibility: hidden;
-  }
-
-  .button--loading syn-spinner {
-    --indicator-color: currentColor;
-    position: absolute;
-    font-size: 1em;
-    height: 1em;
-    width: 1em;
-    top: calc(50% - 0.5em);
-    left: calc(50% - 0.5em);
-  }
-
-  /*
-   * Badges
-   */
-
-  .button ::slotted(syn-badge) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    translate: 50% -50%;
-    pointer-events: none;
-  }
-
-  .button--rtl ::slotted(syn-badge) {
-    right: auto;
-    left: 0;
-    translate: -50% -50%;
-  }
-
-  /*
-   * Button spacing
-   */
-
-  .button--has-label.button--small .button__label {
-    padding: 0 var(--syn-spacing-small);
-  }
-
-  .button--has-label.button--medium .button__label {
-    padding: 0 var(--syn-spacing-medium);
-  }
-
-  .button--has-label.button--large .button__label {
-    padding: 0 var(--syn-spacing-large);
-  }
-
-  .button--has-prefix.button--small {
-    padding-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .button--has-prefix.button--small .button__label {
-    padding-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .button--has-prefix.button--medium {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button--has-prefix.button--medium .button__label {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button--has-prefix.button--large {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button--has-prefix.button--large .button__label {
-    padding-inline-start: var(--syn-spacing-small);
-  }
-
-  .button--has-suffix.button--small,
-  .button--caret.button--small {
-    padding-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .button--has-suffix.button--small .button__label,
-  .button--caret.button--small .button__label {
-    padding-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .button--has-suffix.button--medium,
-  .button--caret.button--medium {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  .button--has-suffix.button--medium .button__label,
-  .button--caret.button--medium .button__label {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  .button--has-suffix.button--large,
-  .button--caret.button--large {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  .button--has-suffix.button--large .button__label,
-  .button--caret.button--large .button__label {
-    padding-inline-end: var(--syn-spacing-small);
-  }
-
-  /*
-   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
-   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
-   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
-   * buttons and we style them here instead.
-   */
-
-  :host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([data-syn-button-group__button--inner]) .button {
-    border-radius: 0;
-  }
-
-  :host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  /* All except the first */
-  :host([data-syn-button-group__button]:not([data-syn-button-group__button--first])) {
-    margin-inline-start: calc(-1 * var(--syn-input-border-width));
-  }
-
-  /* Add a visual separator between solid buttons */
-  :host(
-      [data-syn-button-group__button]:not(
-          [data-syn-button-group__button--first],
-          [data-syn-button-group__button--radio],
-          [variant='filled']
-        ):not(:hover)
-    )
-    .button:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    bottom: 0;
-    border-left: solid 1px rgb(128 128 128 / 33%);
-    mix-blend-mode: multiply;
-  }
-
-  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-  :host([data-syn-button-group__button--hover]) {
-    z-index: 1;
-  }
-
-  /* Focus and checked are always on top */
-  :host([data-syn-button-group__button--focus]),
-  :host([data-syn-button-group__button][checked]) {
-    z-index: 2;
-  }
-`;

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

@@ -1,315 +0,0 @@
-/* eslint-disable */
-import { classMap } from 'lit/directives/class-map.js';
-import { FormControlController, validValidityState } from '../../internal/form.js';
-import { HasSlotController, getTextContent } from '../../internal/slot.js';
-import { html, literal } from 'lit/static-html.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { LocalizeController } from '../../utilities/localize.js';
-import { property, query, 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 SynSpinner from '../spinner/spinner.component.js';
-import styles from './button.styles.js';
-import customStyles from './button.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
-import type { SynergyFormControl } from '../../internal/synergy-element.js';
-import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.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.
- */
-@enableDefaultSettings('SynButton')
-export default class SynButton extends SynergyElement implements SynergyFormControl {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
-  static dependencies = {
-    'syn-icon': SynIcon,
-    'syn-spinner': SynSpinner
-  };
-
-  private readonly formControlController = new FormControlController(this, {
-    assumeInteractionOn: ['click']
-  });
-
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
-  private readonly localize = new LocalizeController(this);
-
-  @query('.button') button: HTMLButtonElement | HTMLLinkElement;
-  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
-
-  @state() private iconOnly = false;
-
-  @state() private hasFocus = false;
-  @state() invalid = false;
-  @property({ reflect: true }) title = ''; // make reactive to pass through
-
-  /** The button's theme variant. */
-  @property({ reflect: true }) variant: 'filled' | 'outline' | 'text' = 'outline';
-
-  /** The button's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
-  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
-  @property({ type: Boolean, reflect: true }) caret = false;
-
-  /** Disables the button. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Draws the button in a loading state. */
-  @property({ type: Boolean, reflect: true }) loading = false;
-
-  /**
-   * 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.
-   */
-  @property() type: 'button' | 'submit' | 'reset' = 'button';
-
-  /**
-   * 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.
-   */
-  @property() 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.
-   */
-  @property() value = '';
-
-  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-  @property() href = '';
-
-  /** Tells the browser where to open the link. Only used when `href` is present. */
-  @property() target: '_blank' | '_parent' | '_self' | '_top';
-
-  /**
-   * 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.
-   */
-  @property() rel = 'noreferrer noopener';
-
-  /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
-  @property() download?: string;
-
-  /**
-   * 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.
-   */
-  @property() form: string;
-
-  /** Used to override the form owner's `action` attribute. */
-  @property({ attribute: 'formaction' }) formAction: string;
-
-  /** Used to override the form owner's `enctype` attribute.  */
-  @property({ attribute: 'formenctype' })
-  formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-
-  /** Used to override the form owner's `method` attribute.  */
-  @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';
-
-  /** Used to override the form owner's `novalidate` attribute. */
-  @property({ attribute: 'formnovalidate', type: Boolean }) formNoValidate: boolean;
-
-  /** Used to override the form owner's `target` attribute. */
-  @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
-
-  /** Gets the validity state object */
-  get validity() {
-    if (this.isButton()) {
-      return (this.button as HTMLButtonElement).validity;
-    }
-
-    return validValidityState;
-  }
-
-  /** Gets the validation message */
-  get validationMessage() {
-    if (this.isButton()) {
-      return (this.button as HTMLButtonElement).validationMessage;
-    }
-
-    return '';
-  }
-
-  firstUpdated() {
-    if (this.isButton()) {
-      this.formControlController.updateValidity();
-    }
-  }
-
-  private handleBlur() {
-    this.hasFocus = false;
-    this.emit('syn-blur');
-  }
-
-  private handleFocus() {
-    this.hasFocus = true;
-    this.emit('syn-focus');
-  }
-
-  private handleClick() {
-    if (this.type === 'submit') {
-      this.formControlController.submit(this);
-    }
-
-    if (this.type === 'reset') {
-      this.formControlController.reset(this);
-    }
-  }
-
-  private handleInvalid(event: Event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
-
-  private isButton() {
-    return this.href ? false : true;
-  }
-
-  private isLink() {
-    return this.href ? true : false;
-  }
-
-  private handleSlotChange() {
-    const textContent = getTextContent(this.defaultSlot).trim();
-    const assignedElements = this.defaultSlot.assignedElements({flatten: true})
-    const iconOnlyElement = assignedElements.length === 1 && assignedElements[0].tagName.toLowerCase() === 'syn-icon';
-
-    this.iconOnly = iconOnlyElement && textContent === '';
-  }
-
-  @watch('disabled', { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    if (this.isButton()) {
-      // Disabled form controls are always valid
-      this.formControlController.setValidity(this.disabled);
-    }
-  }
-
-  /** Simulates a click on the button. */
-  click() {
-    this.button.click();
-  }
-
-  /** Sets focus on the button. */
-  focus(options?: FocusOptions) {
-    this.button.focus(options);
-  }
-
-  /** Removes focus from the button. */
-  blur() {
-    this.button.blur();
-  }
-
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    if (this.isButton()) {
-      return (this.button as HTMLButtonElement).checkValidity();
-    }
-
-    return true;
-  }
-
-  /** Gets the associated form, if one exists. */
-  getForm(): HTMLFormElement | null {
-    return this.formControlController.getForm();
-  }
-
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    if (this.isButton()) {
-      return (this.button as HTMLButtonElement).reportValidity();
-    }
-
-    return true;
-  }
-
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message: string) {
-    if (this.isButton()) {
-      (this.button as HTMLButtonElement).setCustomValidity(message);
-      this.formControlController.updateValidity();
-    }
-  }
-
-  render() {
-    const isLink = this.isLink();
-    const tag = isLink ? literal`a` : literal`button`;
-
-    /* eslint-disable lit/no-invalid-html */
-    /* eslint-disable lit/binding-positions */
-    return html`
-      <${tag}
-        part="base"
-        class=${classMap({
-          button: true,
-          'button--primary': true,
-          'button--text': this.variant === 'text',
-          'button--small': this.size === 'small',
-          'button--medium': this.size === 'medium',
-          'button--large': this.size === 'large',
-          'button--caret': this.caret,
-          'button--disabled': this.disabled,
-          'button--focused': this.hasFocus,
-          'button--loading': this.loading,
-          'button--filled': this.variant === 'filled',
-          'button--outline': this.variant === 'outline',
-          'button--rtl': this.localize.dir() === 'rtl',
-          'button--has-label': this.hasSlotController.test('[default]'),
-          'button--has-prefix': this.hasSlotController.test('prefix'),
-          'button--has-suffix': this.hasSlotController.test('suffix')
-        })}
-        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
-        type=${ifDefined(isLink ? undefined : this.type)}
-        title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
-        name=${ifDefined(isLink ? undefined : this.name)}
-        value=${ifDefined(isLink ? undefined : this.value)}
-        href=${ifDefined(isLink && !this.disabled ? this.href : undefined)}
-        target=${ifDefined(isLink ? this.target : undefined)}
-        download=${ifDefined(isLink ? this.download : undefined)}
-        rel=${ifDefined(isLink ? this.rel : undefined)}
-        role=${ifDefined(isLink ? undefined : 'button')}
-        aria-disabled=${this.disabled ? 'true' : 'false'}
-        tabindex=${this.disabled ? '-1' : '0'}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
-        @invalid=${this.isButton() ? this.handleInvalid : null}
-        @click=${this.handleClick}
-      >
-        <slot name="prefix" part="prefix" class="button__prefix"></slot>
-        <slot part="label" class=${classMap({ 'button__label': true, 'button__icon-only': this.iconOnly })} @slotchange=${this.handleSlotChange}></slot>
-        <slot name="suffix" part="suffix" class="button__suffix"></slot>
-        ${
-          this.caret ? html` <syn-icon part="caret" class="button__caret" library="system" name="chevron-down"></syn-icon> ` : ''
-        }
-        ${this.loading ? html`<syn-spinner part="spinner"></syn-spinner>` : ''}
-      </${tag}>
-    `;
-    /* eslint-enable lit/no-invalid-html */
-    /* eslint-enable lit/binding-positions */
-  }
-}