@synergy-design-system/mcp 2.6.1 → 2.8.0

package/metadata/static/components/syn-switch/docs.md

@@ -38,6 +38,28 @@ Use the disabled attribute to disable the switch.
 
 ---
 
+## Readonly
+
+Add the readonly attribute to draw a read-only switch.
+
+```html
+<div
+  style="
+    display: flex;
+    gap: var(--syn-spacing-large);
+    flex-direction: column;
+    align-items: flex-start;
+  "
+>
+  <syn-switch readonly="" title="" size="medium" form="">Unchecked</syn-switch>
+  <syn-switch checked="" readonly="" title="" size="medium" form=""
+    >Checked</syn-switch
+  >
+</div>
+```
+
+---
+
 ## Sizes
 
 Use the size attribute to change a switch’s size.

package/metadata/static/components/syn-textarea/docs.md

@@ -93,7 +93,7 @@ Use the placeholder attribute to add a placeholder.
 
 ## Readonly Textareas
 
-Add the read-only attribute to draw a read-only textarea.
+Add the readonly attribute to draw a read-only textarea.
 
 ```html
 <syn-textarea

package/metadata/static/components/syn-tooltip/docs.md

@@ -142,3 +142,76 @@ Set the trigger attribute to click to toggle the tooltip on click instead of
   >
 </syn-tooltip>
 ```
+
+---
+
+## Manual Trigger
+
+Tooltips can be controlled programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.
+
+```html
+<syn-button style="margin-right: 4rem" title="" variant="outline" size="medium"
+  >Toggle Manually</syn-button
+>
+<syn-tooltip
+  content="This is an avatar"
+  trigger="manual"
+  class="manual-tooltip"
+  open=""
+>
+  <syn-icon-button
+    name="person"
+    label="Person"
+    size="medium"
+    color="neutral"
+  ></syn-icon-button>
+</syn-tooltip>
+```
+
+---
+
+## Removing Arrows
+
+You can control the size of tooltip arrows by overriding the --syn-tooltip-arrow-size design token. To remove them, set the value to 0 as shown below.
+
+```html
+<syn-tooltip
+  content="This is a tooltip"
+  style="--syn-tooltip-arrow-size: 0"
+  open=""
+>
+  <syn-button title="" variant="outline" size="medium">No Arrow</syn-button>
+</syn-tooltip>
+```
+
+---
+
+## HTML In Tooltips
+
+Use the content slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.
+
+```html
+<syn-tooltip open="">
+  <div slot="content">
+    I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
+  </div>
+
+  <syn-button title="" variant="outline" size="medium">Hover me</syn-button>
+</syn-tooltip>
+```
+
+---
+
+## Setting A Maximum Width
+
+Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.
+
+```html
+<syn-tooltip
+  style="--max-width: 80px"
+  content="This tooltip will wrap after only 80 pixels."
+  open=""
+>
+  <syn-button title="" variant="outline" size="medium">Hover me</syn-button>
+</syn-tooltip>
+```

package/metadata/static/components/syn-validate/docs.md

@@ -25,6 +25,33 @@ Validate offers options for convenient error handling in form elements.
 
 ---
 
+## Tooltip Variant
+
+When the tooltip variant is chosen, validation errors are displayed in a <syn-tooltip> component that has its center at the invalid element. The native tooltip is suppressed.
+
+```html
+<form id="components-syn-validate--tooltip-variant-validate-demo-form">
+  <syn-validate class="validation-tooltip" variant="tooltip" on="live">
+    <syn-input
+      label="Invalid input"
+      type="email"
+      value="team(at)synergy.com"
+      required=""
+      title=""
+      size="medium"
+      form=""
+    ></syn-input>
+  </syn-validate>
+  <p>
+    <syn-button type="submit" title="" variant="outline" size="medium"
+      >Submit</syn-button
+    >
+  </p>
+</form>
+```
+
+---
+
 ## Inline Variant
 
 Set the variant attribute to inline to show the invalid message below the selected element.👨‍💻 Additional developer Information:Per default, syn-validate uses the browser’s built-in validation. This shows only one error at a time and is optimized for accessbility.When using the inline variant, you have to ensure accessibility on your side and have to have in mind it most likely will lead to layout shifts.
@@ -33,7 +60,7 @@ Set the variant attribute to inline to show the invalid message below the select
 <form id="components-syn-validate--inline-variant-validate-demo-form">
   <syn-validate class="validation-inline" variant="inline" on="">
     <syn-input
-      label="Inline Validation"
+      label="Inline validation"
       type="email"
       value="team(at)synergy.com"
       title=""
@@ -65,7 +92,7 @@ Use hide-icon to hide the icon in inline style. This is especially useful when s
     on=""
   >
     <syn-input
-      label="Inline Validation"
+      label="Hide icon"
       type="email"
       value="team(at)synergy.com"
       title=""
@@ -95,9 +122,9 @@ In development use the size attribute of the form element e.g. syn-input to set
   >
     <syn-validate eager="" variant="inline" on="">
       <syn-input
-        label="Inline Validation"
         type="email"
         value="team(at)synergy.com"
+        label="Size small"
         size="small"
         title=""
         form=""
@@ -106,9 +133,9 @@ In development use the size attribute of the form element e.g. syn-input to set
 
     <syn-validate eager="" variant="inline" on="">
       <syn-input
-        label="Inline Validation"
         type="email"
         value="team(at)synergy.com"
+        label="Size medium"
         size="medium"
         title=""
         form=""
@@ -117,9 +144,9 @@ In development use the size attribute of the form element e.g. syn-input to set
 
     <syn-validate eager="" variant="inline" on="">
       <syn-input
-        label="Inline Validation"
         type="email"
         value="team(at)synergy.com"
+        label="Size large"
         size="large"
         title=""
         form=""
@@ -206,7 +233,7 @@ Wrap the element around any other form field, that follows browser standards to
 <form id="components-syn-validate--custom-form-field-validate-demo-form">
   <h3 style="margin: 0; padding: 0">Choose SICK´s brand color</h3>
   <syn-validate class="validation-custom-form-field" on="live" variant="inline">
-    <validate-demo-radio name="color"></validate-demo-radio>
+    <validate-demo-radio name="color" required=""></validate-demo-radio>
   </syn-validate>
 
   <p>

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
+    "@synergy-design-system/components": "3.6.0",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/components": "3.4.1",
     "@synergy-design-system/fonts": "1.0.3",
+    "@synergy-design-system/tokens": "^3.6.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/styles": "2.0.1",
-    "@synergy-design-system/tokens": "^3.4.1"
+    "@synergy-design-system/styles": "2.0.1"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.6.1",
+  "version": "2.8.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",

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

@@ -1,136 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .alert {
-    /* Defines the used border and icon color for variants */
-    --variant-color-border: var(--syn-alert-informative-color-border);
-    --variant-color-background: var(--syn-alert-informative-color-background);
-    --variant-color-icon: var(--syn-alert-informative-color-icon);
-    --variant-color-indicator: var(--syn-alert-informative-color-indicator);
-
-    /* Defines special settings for sizes */
-    --size-font-size: var(--syn-font-size-medium);
-    --size-icon-size: var(--syn-font-size-x-large);
-    --size-min-height: 54px;
-    --size-message-padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);
-    --size-icon-padding-block: var(--syn-spacing-medium);
-    --size-icon-padding-inline: var(--syn-spacing-medium);
-
-    background-color: var(--variant-color-background);
-    border: var(--syn-panel-border-width) solid var(--variant-color-border);
-    border-left: 0;
-    border-radius: var(--syn-border-radius-none);
-    box-sizing: content-box;
-    color: var(--syn-typography-color-text);
-    font-size: var(--size-font-size);
-    line-height: var(--syn-line-height-normal);
-    min-height: var(--size-min-height);
-  }
-
-  /**
-   * Add back the items left borders
-   * This is done to prevent border clipping with the large border-left needed on .alert
-   * Note we also need to adjust our paddings to add the border width here
-   */
-  .alert::before {
-    background: var(--variant-color-indicator);
-    bottom: -1px;
-    content: "";
-    left: 0;
-    position: absolute;
-    top: -1px;
-    width: var(--syn-spacing-2x-small);
-  }
-
-  .alert :first-child {
-    margin-inline-start: var(--syn-spacing-2x-small);
-  }
-
-  /**
-   * Make sure everything is aligned to top
-   */
-  .alert__icon,
-  .alert__close-button {
-    align-items: flex-start;
-    font-size: var(--size-icon-size);
-  }
-
-  .alert__message {
-    align-self: center;
-    padding: var(--size-message-padding);
-  }
-
-  /**
-   * Alert Icon
-   */
-  .alert__icon {
-    color: var(--variant-color-icon);
-    padding-block-start: var(--size-icon-padding-block);
-    padding-inline-start: var(--size-icon-padding-inline);
-  }
-
-  /**
-   * Close Icon
-   */
-  .alert__close-button {
-    align-self: start; /* #1135: Fix alignment for the close icon */
-    color: var(--syn-typography-color-text);
-    margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
-    margin-inline-end: var(--syn-spacing-x-small);
-  }
-
-  /**
-   * Variant colors
-   */
-  .alert--success {
-    --variant-color-border: var(--syn-alert-success-color-border);
-    --variant-color-background: var(--syn-alert-success-color-background);
-    --variant-color-icon: var(--syn-alert-success-color-icon);
-    --variant-color-indicator: var(--syn-alert-success-color-indicator);
-  }
-
-  .alert--neutral {
-    --variant-color-border: var(--syn-alert-neutral-color-border);
-    --variant-color-background: var(--syn-alert-neutral-color-background);
-    --variant-color-icon: var(--syn-alert-neutral-color-icon);
-    --variant-color-indicator: var(--syn-alert-neutral-color-indicator);
-  }
-
-  .alert--warning {
-    --variant-color-border: var(--syn-alert-warning-color-border);
-    --variant-color-background: var(--syn-alert-warning-color-background);
-    --variant-color-icon: var(--syn-alert-warning-color-icon);
-    --variant-color-indicator: var(--syn-alert-warning-color-indicator);
-  }
-
-  .alert--danger {
-    --variant-color-border: var(--syn-alert-error-color-border);
-    --variant-color-background: var(--syn-alert-error-color-background);
-    --variant-color-icon: var(--syn-alert-error-color-icon);
-    --variant-color-indicator: var(--syn-alert-error-color-indicator);
-  }
-
-  /* #1119: Alert Sizes */
-  .alert--small {
-    --size-font-size: var(--syn-font-size-small);
-    --size-icon-size: var(--syn-font-size-large);
-    --size-min-height: 44px;
-    --size-message-padding: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-small);
-    --size-icon-padding-block: var(--syn-spacing-small);
-    --size-icon-padding-inline: var(--syn-spacing-small);
-  }
-
-  /* Adjust close button size for small alerts */
-  .alert--small .alert__close-button {
-    font-size: var(--syn-font-size-medium);
-  }
-
-  .alert--large {
-    --size-font-size: var(--syn-font-size-large);
-    --size-icon-size: var(--syn-font-size-2x-large);
-    --size-min-height: 68px;
-    --size-message-padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-medium-large) var(--syn-spacing-medium-large);
-    --size-icon-padding-block: var(--syn-spacing-medium-large);
-    --size-icon-padding-inline: var(--syn-spacing-medium-large);
-  }
-`;

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

@@ -1,86 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .checkbox {
-    /* #1083: This adds spacing around multi-line labels */
-    padding: var(--syn-spacing-2x-small) 0;
-  }
-
-  .checkbox--small {
-    padding: var(--syn-spacing-3x-small) 0;
-  }
-
-  .checkbox__control {
-    border-radius: var(--syn-checkbox-border-radius);
-
-    /* #1083: This adds spacing around multi-line labels */
-    margin: 0.1em 0;
-  }
-
-  /* Checked/indeterminate */
-  .checkbox--checked .checkbox__control,
-  .checkbox--indeterminate .checkbox__control {
-    background-color: var(--syn-interactive-emphasis-color);
-    border-color: var(--syn-interactive-emphasis-color);
-  }
-
-  :host([data-user-invalid]) .checkbox__control {
-    background: var(--syn-input-border-color-focus-error);
-    border-color: var(--syn-input-border-color-focus-error);
-  }
-
-  /**
-   * #943: When invalid, use a transparent background if not checked or indeterminate
-   */
-  :host([data-user-invalid]:not([checked]):not([indeterminate])) .checkbox__control {
-    background: transparent;
-  }
-
-  /** #429: Use token for opacity */
-  .checkbox--disabled {
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /**
-   * Hover
-   * Applies the hover state to the whole component
-   */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):hover .checkbox__control {
-    background-color: var(--syn-input-background-color-hover);
-    border-color: var(--syn-input-border-color-hover);
-  }
-
-  /**
-   * Checked/indeterminate + hover
-   * Applies the hover state to the whole component
-   */
-  .checkbox.checkbox--checked:not(.checkbox--disabled):hover .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):hover .checkbox__control {
-    background-color: var(--syn-interactive-emphasis-color-hover);
-    border-color: var(--syn-interactive-emphasis-color-hover);
-  }
-
-  /*
-   * #443: Add active styles
-   * The checked and unchecked states have different active colors
-   * Note the fallback is defined to match the hover color.
-   * This is done to make sure no active state is shown at all if no active color is defined.
-   * Still better than showing one for the unchecked state but not for the checked state.
-   */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):active .checkbox__control {
-    border-color: var(--syn-input-border-color-active);
-  }
-
-  /* Checked/indeterminate */
-  .checkbox.checkbox--checked:not(.checkbox--disabled):active .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):active .checkbox__control {
-    background: var(--syn-interactive-emphasis-color-active);
-    border-color: var(--syn-interactive-emphasis-color-active);
-  }
-
-  .checkbox__label {
-    align-self: center;
-    line-height: var(--syn-line-height-normal);
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-`;

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

@@ -1,122 +0,0 @@
-import { css } from 'lit';
-import sharedOptionSize from '../option/option-size.styles.js';
-
-export default css`
-
-  .combobox__display-input {
-    flex: 1;
-    min-width: var(--syn-spacing-2x-large);
-    width: unset;
-  }
-
-  .combobox:not(.combobox--disabled) .combobox__display-input {
-    cursor: text;
-  }
-
-  .listbox__options ::slotted(syn-option[hidden]), 
-  .listbox__options ::slotted(syn-optgroup[hidden]) {
-    display: none;
-  }
-
-  .listbox__no-results {
-    align-items: center;
-    color: var(--syn-color-neutral-950);
-    display: flex;
-    font: var(--syn-body-medium-regular);
-    padding: var(--syn-spacing-small) var(--syn-spacing-medium) var(--syn-spacing-small) 52px;
-  }
-
-  .combobox--small .listbox__no-results {
-    font-size: var(--syn-input-font-size-small);
-    min-height: var(--syn-input-height-small);
-    padding: 0 var(--syn-spacing-small) 0 40px;
-  }
-
-  .combobox--large .listbox__no-results {
-    font-size: var(--syn-input-font-size-large);
-    min-height: var(--syn-input-height-large);
-    padding: 0 var(--syn-spacing-large) 0 68px;
-  }
-
-  /* Multi Select */
-  .combobox__tags {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    margin-inline-start: var(--syn-spacing-2x-small);
-  }
-
-  .combobox__tags::slotted(syn-tag) {
-    cursor: pointer !important;
-  }
-
-  .combobox--disabled .combobox__tags,
-  .combobox--disabled .combobox__tags::slotted(syn-tag) {
-    cursor: not-allowed !important;
-  }
-
-  .combobox--small .combobox__tags {
-    gap: var(--syn-spacing-2x-small);
-  }
-
-  .combobox--medium .combobox__tags {
-    gap: var(--syn-spacing-x-small);
-  }
-
-  .combobox--large .combobox__tags {
-    gap: var(--syn-spacing-small);
-  }
-
-  .combobox--tags-visible.combobox--small .combobox__tags {
-    margin-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .combobox--tags-visible.combobox--medium .combobox__tags {
-    margin-inline-end: var(--syn-input-spacing-small);
-  }
-
-  .combobox--tags-visible.combobox--large .combobox__tags {
-    margin-inline-end: var(--syn-input-spacing-medium);
-  }
-
-  /**
-   * #850: Allow to measure the size of the combobox.
-   * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.
-   * Scoped to multiple to not break the single select per accident.
-   * Scoped to when placeholder is not visible to not break the placeholder visualization
-   */
-  :host([multiple]) :not(.combobox--placeholder-visible).combobox--tags-visible > .combobox__inputs > .combobox__tags {
-    min-width: 85px;
-    overflow: hidden;
-  }
-
-  :host([multiple]) .combobox__tags > div {
-    display: contents;
-  }
-
-  :host([multiple]) .combobox__tags > div > syn-tag {
-    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);
-
-    max-width: var(--syn-select-tag-max-width);
-  }
-
-  :host([multiple]) .combobox__tags > div > syn-tag::part(content) {
-    display: initial;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* 
-  This class is needed to be able to hide the options as long as the popup close animation is running.
-  As otherwise the listbox would flicker because the options are shown again when the value is reset to empty string.
-  */
-  .options__hide {
-    /* We need to set the slot to something different than display: contents to be able to hide it. Also it should not take any space so we remove the height */
-    display: block;
-    height: 0;
-    opacity: 0;
-  }
-
-  ${sharedOptionSize}
-`;

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

@@ -1,18 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .popup {
-    /* Clear UA styles for [popover] */
-    :where(&) {
-      background: unset;
-      border: unset;
-      color: unset;
-      height: unset;
-      inset: unset;
-      margin: unset;
-      overflow: unset;
-      padding: unset;
-      width: unset;
-    }
-  }
-`;

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

@@ -1,86 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host(:focus-visible) .radio__control {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-width);
-  }
-
-  .radio {
-    align-items: flex-start;
-  }
-
-  /** #429: Use token for opacity */
-  .radio--disabled { 
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /* Checked */
-  /* stylelint-disable-next-line no-descending-specificity */
-  .radio--checked .radio__control {
-    background-color: var(--syn-interactive-emphasis-color);
-    border-color: var(--syn-interactive-emphasis-color);
-  }
-
-  /* Reset original hover */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-    background: inherit;
-    border-color: inherit;
-  }
-
-  /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled):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):active .radio__control  {
-    background-color: var(--syn-interactive-emphasis-color-active);
-    border-color: var(--syn-interactive-emphasis-color-active);
-  }
-
-  /* Not-Checked + Hover */
-  .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {
-    border-color: var(--syn-input-border-color-hover);
-  }
-
-  /* Not-Checked + active */
-  .radio:not(.radio--checked):not(.radio--disabled):active .radio__control {
-    border-color: var(--syn-input-border-color-active);
-  }
-
-  /* Fix#456: Multi line radio fixes */
-  .radio__label {
-    align-self: center;
-    margin-inline-start: var(--syn-spacing-x-small);
-    margin-top: -1px;
-  }
-
-  .radio--small .radio__label {
-    font: var(--syn-body-small-regular);
-  }
-
-  .radio--medium .radio__label {
-    font: var(--syn-body-medium-regular);
-  }
-
-  .radio--large .radio__label {
-    font: var(--syn-body-large-regular);
-  }
-
-  /* /Fix#456 */
-
-  /**
-   * #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.
-   */
-  .radio__checked-icon {
-    scale: 0.5;
-  }
-
-  .radio--small .radio__label, .radio--large .radio__label  {
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-`;