@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,278 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /**
-  * Fixes overflowing of the syn-input in flex and grid containers with fix width (https://github.com/synergy-design-system/synergy-design-system/issues/761)
-  */
-  .input__control {
-    width: 100%;
-  }
-
-  /** #429: Use token for opacity */
-  .input--standard.input--disabled,
-  .input--readonly.input--disabled {
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /**
-  * Min-width size adjusted for each size so 2 full digits are shown for type number
-  */ 
- 
-  :host([size="small"][type="number"]:not([no-spin-buttons])) {
-    min-width: calc(var(--syn-input-font-size-small)*8.3);
-  }
-
-  :host([size="medium"][type="number"]:not([no-spin-buttons])) {
-    min-width: calc(var(--syn-input-font-size-medium)*9.4);
-  }
-
-  :host([size="large"][type="number"]:not([no-spin-buttons])) {
-    min-width: calc(var(--syn-input-font-size-large)*10);
-  }
-
-   /**
-   * Clearable + Password Toggle
-   */
-   .input__clear {
-    color: var(--syn-input-icon-icon-clearable-color);
-  }
-
-  .input--small .input__clear,
-  .input--small .input__password-toggle {
-    font-size: var(--syn-font-size-medium);
-    padding-left: var(--syn-spacing-x-small);
-    padding-right: var(--syn-spacing-small);
-    width: auto;
-  }
-
-  .input--medium .input__clear,
-  .input--medium .input__password-toggle {
-    font-size: var(--syn-font-size-x-large);
-    padding-left: var(--syn-spacing-small);
-    padding-right: var(--syn-spacing-medium);
-    width: auto;
-  }
-
-  .input--large .input__clear,
-  .input--large .input__password-toggle {
-    font-size: var(--syn-font-size-2x-large);
-    padding-left: var(--syn-spacing-medium);
-    padding-right: var(--syn-spacing-large);
-    width: auto;
-  }
-
-  /* Prefix / Suffix color */
-  .input__prefix ::slotted(*),
-  .input__suffix ::slotted(*) {
-    color: var(--syn-input-icon-color);
-  }
-
-
-  /* PADDINGS */
-  .input--small .input__control {
-    padding: var(--syn-spacing-3x-small) var(--syn-input-spacing-small);
-  }
-
-  .input--medium .input__control {
-    padding: var(--syn-spacing-x-small) var(--syn-input-spacing-medium);
-  }
-
-  .input--large .input__control {
-    padding: var(--syn-input-spacing-small) var(--syn-input-spacing-large);
-  }
-
-  .input--small .input__prefix ::slotted(*) {
-    margin-inline: var(--syn-input-spacing-small) var(--syn-spacing-x-small);
-  }
-
-  .input--medium .input__prefix ::slotted(*) {
-    margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-small);
-  }
-
-  .input--large .input__prefix ::slotted(*) {
-    margin-inline: var(--syn-input-spacing-large) var(--syn-input-spacing-medium);
-  }
-
-  .input--small .input__suffix ::slotted(*) {
-    margin-inline: var(--syn-spacing-x-small) var(--syn-input-spacing-small);
-  }
-
-  .input--medium .input__suffix ::slotted(*) {
-    margin-inline: var(--syn-input-spacing-small) var(--syn-input-spacing-medium);
-  }
-
-  .input--large .input__suffix ::slotted(*) {
-    margin-inline: var(--syn-input-spacing-medium) var(--syn-input-spacing-large);
-  }
-
-  .input__clear + .input__suffix ::slotted(*),
-  .input__password-toggle + .input__suffix ::slotted(*) {
-    margin-inline-start: 0;  
-  }
-
-  .input--small .input__clear + .input__password-toggle {
-    padding-left: var(--syn-spacing-2x-small);
-  }
-
-  .input--medium .input__clear + .input__password-toggle {
-    padding-left: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));
-  }
-
-  .input--large .input__clear + .input__password-toggle {
-    padding-left: var(--syn-spacing-x-small);
-  }
-
-  .input--small .input__clear:has(+ .input__password-toggle) {
-    padding-right: var(--syn-spacing-2x-small);
-  }
-
-  .input--medium .input__clear:has(+ .input__password-toggle) {
-    padding-right: calc(var(--syn-spacing-2x-small) + var(--syn-spacing-3x-small));
-  }
-
-  .input--large .input__clear:has(+ .input__password-toggle) {
-    padding-right: var(--syn-spacing-x-small);
-  }
-
-  .form-control--has-suffix .input--large .input__clear:has(+ .input__suffix),
-  .form-control--has-suffix .input--large .input__password-toggle:has(+ .input__suffix) {
-    padding-right: var(--syn-spacing-medium);
-  }
-
-  .form-control--has-suffix .input--small .input__clear:has(+ .input__suffix),
-  .form-control--has-suffix .input--small .input__password-toggle:has(+ .input__suffix) {
-    padding-right: var(--syn-spacing-x-small);
-  }
-
-  .form-control--has-suffix .input--medium .input__clear:has(+ .input__suffix),
-  .form-control--has-suffix .input--medium .input__password-toggle:has(+ .input__suffix) {
-    padding-right: var(--syn-spacing-small);
-  }
-
-  /* Fixes wrong paddings on some suffix special cases: https://github.com/synergy-design-system/synergy-design-system/issues/817  */
-  .form-control--has-prefix .input__control {
-    padding-left: 0;
-  }
-
-  /* Fixes wrong paddings on some suffix special cases: https://github.com/synergy-design-system/synergy-design-system/issues/817  */
-  .form-control--has-suffix .input__control,
-  .input:has(.input__clear) .input__control,
-  .input:has(.input__password-toggle) .input__control {
-    padding-right: 0;
-  }
-
-  :host([type='number']) .input--large:not(.input--no-spin-buttons) .input__clear,
-  :host([type='number']) .input--large:not(.input--no-spin-buttons) .input__password-toggle {
-    padding-right: var(--syn-spacing-medium);
-  }
-
-  /* ICONS SIZE */
-   .input--small .input__prefix ::slotted(syn-icon),
-   .input--small .input__suffix ::slotted(syn-icon) {
-    font-size: var(--syn-font-size-medium);
-   }
-
-  .input--medium .input__prefix ::slotted(syn-icon),
-  .input--medium .input__suffix ::slotted(syn-icon) {
-    font-size: var(--syn-font-size-x-large);
-   }
-
-  .input--large .input__prefix ::slotted(syn-icon),
-  .input--large .input__suffix ::slotted(syn-icon) {
-    font-size: var(--syn-font-size-2x-large);
-   }
-
-  :host([data-user-invalid]) .input--standard {
-    border-color: var(--syn-input-border-color-focus-error);
-  }
-
-  :host([data-user-invalid]) .input--standard.input--focused:not(.input--disabled) {
-    border-color: var(--syn-input-border-color-focus-error);
-    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);
-  }
-
-  .input--standard.input--disabled .input__suffix, 
-  .input--standard.input--disabled .input__prefix {
-    cursor: not-allowed;
-  } 
-
-
-  /**
-  * Number stepper
-  */
-  .input__number-stepper {
-    align-items: center;
-    display: flex;
-  }
-
-  .input--small .input__number-stepper {
-    margin-left: var(--syn-spacing-2x-small);
-  }
-
-  .input--medium .input__number-stepper {
-    margin-right: var(--syn-spacing-2x-small);
-  }
-
-  .input--large .input__number-stepper {
-    margin-right: var(--syn-spacing-x-small);
-  }
-
-
-  /**
-  * Number stepper buttons
-  */
-  .input__number-stepper-button {
-    align-items: center;
-    background: none;
-    border: none;
-    color: var(--syn-interactive-emphasis-color);
-    cursor: pointer;
-    display: flex;
-    padding: var(--syn-spacing-x-small);
-    transition: var(--syn-transition-x-fast) color;
-  }
-
-  .input--small .input__number-stepper-button {
-    font-size: var(--syn-font-size-medium);
-  }
-
-  .input--medium .input__number-stepper-button {
-    font-size: var(--syn-font-size-x-large);
-  }
-
-  .input--large .input__number-stepper-button {
-    font-size: var(--syn-font-size-2x-large);
-  }
-
-  .input__number-stepper-button:hover:not([disabled]) {
-    color: var(--syn-interactive-emphasis-color-hover);
-  }
-
-  .input__number-stepper-button:active:not([disabled]) {
-    color: var(--syn-interactive-emphasis-color-active);
-  }
-
-  .input__number-stepper-button[disabled] {
-    color: var(--syn-color-neutral-400);
-    cursor: not-allowed;
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /**
-  * Number stepper divider
-  */
-  .input--small .input__number-divider {
-    height: var(--syn-font-size-medium);
-    margin: 0;
-  }
-
-  .input--medium .input__number-divider {
-    height: var(--syn-font-size-x-large);
-    margin: 0 var(--syn-spacing-2x-small);
-  }
-
-  .input--large .input__number-divider {
-    height: var(--syn-font-size-2x-large);
-    margin: 0 var(--syn-spacing-x-small);
-  }
-`;

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

@@ -1,91 +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/input/input.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynChangeEvent } from '@synergy-design-system/components';
-import type { SynClearEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-import type { SynInputEvent } from '@synergy-design-system/components';
-import type { SynInvalidEvent } from '@synergy-design-system/components';
-import type { SynClampEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-input';
-Component.define('syn-input');
-
-/**
- * @summary Inputs collect data from the user.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- * @dependency syn-divider
- *
- * @slot label - The input's label. Alternatively, you can use the `label` attribute.
- * @slot prefix - Used to prepend a presentational icon or similar element to the input.
- * @slot suffix - Used to append a presentational icon or similar element to the input.
- * @slot clear-icon - An icon to use in lieu of the default clear icon.
- * @slot show-password-icon - An icon to use in lieu of the default show password icon.
- * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
- * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
- * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.
- * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.
- *
- * @event syn-blur - Emitted when the control loses focus.
- * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
- * @event syn-clear - Emitted when the clear button is activated.
- * @event syn-focus - Emitted when the control gains focus.
- * @event syn-input - Emitted when the control receives input.
- * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- * @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
- *
- * @csspart form-control - The form control that wraps the label, input, and help text.
- * @csspart form-control-label - The label's wrapper.
- * @csspart form-control-input - The input's wrapper.
- * @csspart form-control-help-text - The help text's wrapper.
- * @csspart base - The component's base wrapper.
- * @csspart input - The internal `<input>` control.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart clear-button - The clear button.
- * @csspart password-toggle-button - The password toggle button.
- * @csspart suffix - The container that wraps the suffix.
- * @csspart stepper - The container that wraps the number stepper.
- * @csspart decrement-number-stepper - The decrement number stepper button.
- * @csspart increment-number-stepper - The increment number stepper button.
- * @csspart divider - The divider between the increment and decrement number stepper buttons.
- *
- * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.
- * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.
- * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.
- * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.
- */
-export const SynInput = createComponent({
-  displayName: 'SynInput',
-  elementClass: Component,
-  events: {
-    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,
-    onSynChange: 'syn-change' as EventName<SynChangeEvent>,
-    onSynClear: 'syn-clear' as EventName<SynClearEvent>,
-    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,
-    onSynInput: 'syn-input' as EventName<SynInputEvent>,
-    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,
-    onSynClamp: 'syn-clamp' as EventName<SynClampEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynBlurEvent } from '@synergy-design-system/components';
-export type { SynChangeEvent } from '@synergy-design-system/components';
-export type { SynClearEvent } from '@synergy-design-system/components';
-export type { SynFocusEvent } from '@synergy-design-system/components';
-export type { SynInputEvent } from '@synergy-design-system/components';
-export type { SynInvalidEvent } from '@synergy-design-system/components';
-export type { SynClampEvent } from '@synergy-design-system/components';

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

@@ -1,280 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-	/* stylelint-disable */
-  :host {
-    display: block;
-
-    --syn-input-autofill-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-background-color-hover) inset;
-    --syn-input-autofill-readonly-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-readonly-background-color) inset;
-    --syn-input-autofill-text-fill-color: var(--syn-color-primary-500);
-    --syn-input-autofill-caret-color: var(--syn-input-color);
-  }
-
-  .input {
-    flex: 1 1 auto;
-    display: inline-flex;
-    align-items: stretch;
-    justify-content: start;
-    position: relative;
-    width: 100%;
-    font-family: var(--syn-input-font-family);
-    font-weight: var(--syn-input-font-weight);
-    letter-spacing: var(--syn-input-letter-spacing);
-    vertical-align: middle;
-    overflow: hidden;
-    cursor: text;
-    transition:
-      var(--syn-transition-fast) color,
-      var(--syn-transition-fast) border,
-      var(--syn-transition-fast) box-shadow,
-      var(--syn-transition-fast) background-color;
-  }
-
-  /* Standard inputs */
-  .input--standard {
-    background-color: var(--syn-input-background-color);
-    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
-  }
-
-  .input--standard:hover:not(.input--disabled) {
-    background-color: var(--syn-input-background-color-hover);
-    border-color: var(--syn-input-border-color-hover);
-  }
-
-  .input--standard.input--focused:not(.input--disabled) {
-    background-color: var(--syn-input-background-color-focus);
-    border-color: var(--syn-input-border-color-focus);
-    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
-  }
-
-  .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--syn-input-color-focus);
-  }
-
-  .input--standard.input--disabled {
-    background-color: var(--syn-input-background-color-disabled);
-    border-color: var(--syn-input-border-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .input--standard.input--disabled .input__control {
-    color: var(--syn-input-color-disabled);
-  }
-
-  .input--standard.input--disabled .input__control::placeholder {
-    color: var(--syn-input-placeholder-color-disabled);
-  }
-
-  /* Readonly inputs */
-  .input--readonly {
-    border: none;
-    background-color: var(--syn-input-readonly-background-color);
-    color: var(--syn-input-color);
-  }
-
-  .input--readonly:hover:not(.input--disabled) {
-    background-color: var(--syn-input-readonly-background-color-hover);
-  }
-
-  .input--readonly.input--focused:not(.input--disabled) {
-    background-color: var(--syn-input-readonly-background-color-focus);
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
-  }
-
-  .input--readonly.input--disabled {
-    background-color: var(--syn-input-readonly-background-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .input__control {
-    flex: 1 1 auto;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    min-width: 0;
-    height: 100%;
-    color: var(--syn-input-color);
-    border: none;
-    background: inherit;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    cursor: inherit;
-    -webkit-appearance: none;
-  }
-
-  .input__control::-webkit-search-decoration,
-  .input__control::-webkit-search-cancel-button,
-  .input__control::-webkit-search-results-button,
-  .input__control::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-
-  .input__control:-webkit-autofill,
-  .input__control:-webkit-autofill:hover,
-  .input__control:-webkit-autofill:focus,
-  .input__control:-webkit-autofill:active {
-    box-shadow: var(--syn-input-autofill-shadow) !important;
-    -webkit-text-fill-color: var(--syn-input-autofill-text-fill-color);
-    caret-color: var(--syn-input-autofill-caret-color);
-  }
-
-  .input--readonly .input__control:-webkit-autofill,
-  .input--readonly .input__control:-webkit-autofill:hover,
-  .input--readonly .input__control:-webkit-autofill:focus,
-  .input--readonly .input__control:-webkit-autofill:active {
-    box-shadow: var(--syn-input-autofill-readonly-shadow) !important;
-  }
-
-  .input__control::placeholder {
-    color: var(--syn-input-placeholder-color);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .input:hover:not(.input--disabled) .input__control {
-    color: var(--syn-input-color-hover);
-  }
-
-  .input__control:focus {
-    outline: none;
-  }
-
-  .input__prefix,
-  .input__suffix {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    cursor: default;
-  }
-
-  .input__prefix ::slotted(syn-icon),
-  .input__suffix ::slotted(syn-icon) {
-    color: var(--syn-input-icon-color);
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .input--small {
-    border-radius: var(--syn-input-border-radius-small);
-    font-size: var(--syn-input-font-size-small);
-    height: var(--syn-input-height-small);
-  }
-
-  .input--small .input__control {
-    height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);
-    padding: 0 var(--syn-input-spacing-small);
-  }
-
-  .input--small .input__clear,
-  .input--small .input__password-toggle {
-    width: calc(1em + var(--syn-input-spacing-small) * 2);
-  }
-
-  .input--small .input__prefix ::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-small);
-  }
-
-  .input--small .input__suffix ::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-small);
-  }
-
-  .input--medium {
-    border-radius: var(--syn-input-border-radius-medium);
-    font-size: var(--syn-input-font-size-medium);
-    height: var(--syn-input-height-medium);
-  }
-
-  .input--medium .input__control {
-    height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);
-    padding: 0 var(--syn-input-spacing-medium);
-  }
-
-  .input--medium .input__clear,
-  .input--medium .input__password-toggle {
-    width: calc(1em + var(--syn-input-spacing-medium) * 2);
-  }
-
-  .input--medium .input__prefix ::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-medium);
-  }
-
-  .input--medium .input__suffix ::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-medium);
-  }
-
-  .input--large {
-    border-radius: var(--syn-input-border-radius-large);
-    font-size: var(--syn-input-font-size-large);
-    height: var(--syn-input-height-large);
-  }
-
-  .input--large .input__control {
-    height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);
-    padding: 0 var(--syn-input-spacing-large);
-  }
-
-  .input--large .input__clear,
-  .input--large .input__password-toggle {
-    width: calc(1em + var(--syn-input-spacing-large) * 2);
-  }
-
-  .input--large .input__prefix ::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-large);
-  }
-
-  .input--large .input__suffix ::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-large);
-  }
-
-  /*
-   * Clearable + Password Toggle
-   */
-
-  .input__clear,
-  .input__password-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: inherit;
-    color: var(--syn-input-icon-color);
-    border: none;
-    background: none;
-    padding: 0;
-    transition: var(--syn-transition-fast) color;
-    cursor: pointer;
-  }
-
-  .input__clear:hover,
-  .input__password-toggle:hover {
-    color: var(--syn-input-icon-color-hover);
-  }
-
-  .input__clear:focus,
-  .input__password-toggle:focus {
-    outline: none;
-  }
-
-  /* Don't show the browser's password toggle in Edge */
-  ::-ms-reveal {
-    display: none;
-  }
-
-  /* Hide the built-in number spinner */
-  input[type='number']::-webkit-outer-spin-button,
-  input[type='number']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-
-  input[type='number'] {
-    -moz-appearance: textfield;
-  }
-`;