@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,278 @@
+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-color-primary-600);
+    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-color-primary-900)
+  }
+
+  .input__number-stepper-button:active:not([disabled]) {
+    color: var(--syn-color-primary-950)
+  }
+
+  .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

@@ -0,0 +1,91 @@
+// ---------------------------------------------------------------------
+// 🔒 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

@@ -0,0 +1,287 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 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;
+
+    --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;
+  }
+`;