@synergy-design-system/mcp 2.7.0 → 2.8.1

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.1
+ * @synergy-design-system/tokens version 3.6.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.1
+ * @synergy-design-system/tokens version 3.6.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.1
+ * @synergy-design-system/tokens version 3.6.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

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

@@ -30,10 +30,10 @@
     "typescript": "^5.9.3",
     "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/components": "3.6.1",
     "@synergy-design-system/fonts": "1.0.3",
     "@synergy-design-system/styles": "2.0.1",
-    "@synergy-design-system/tokens": "^3.5.0",
-    "@synergy-design-system/components": "3.5.0"
+    "@synergy-design-system/tokens": "^3.6.1"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "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-dropdown/component.custom.styles.ts

@@ -1,5 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* Write custom CSS here */
-`;

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

@@ -1,29 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    border-radius: var(--syn-input-border-radius-medium);
-  }
-
-  /*
-   * #368: Hide the checkmarks for menu items
-   * when no syn-menu-item[checkbox] or loading is present
-   */
-  .menu--no-checkmarks::slotted(syn-menu-item) {
-    --display-checkmark: none;
-  }
-
-  /**
-   * Make sure to hide the syn-divider for the first syn-optgroup
-   * Note! ::slotted does currently not work with ::part, so we
-   * opted for using a css variable here.
-   */
-  ::slotted(syn-menu-label:first-of-type) {
-    --display-divider: none;
-  }
-
-  ::slotted(syn-divider) {
-    /* #369: Slotted syn-dividers should use a lighter color so they do not crash with the border visually */
-    --color: var(--syn-panel-border-color);
-  }
-`;

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

@@ -1,192 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    /* Custom override for hiding the checkmark in menus it is not needed */
-    --display-checkmark: flex;
-
-    /**
-     * Default size settings for menu-item
-     * This prepares the custom sizes that we will add later on
-     * @see https://github.com/synergy-design-system/design/issues/277
-     */
-    --menuitem-inset-border-horizontal: var(--syn-spacing-2x-small);
-    --menuitem-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);
-    --menuitem-min-height: var(--syn-input-height-medium);
-    --menuitem-padding: var(--syn-input-spacing-medium);
-    --menuitem-font-size: var(--syn-input-font-size-medium);
-    --menuitem-icon-size: var(--syn-spacing-large);
-  }
-
-  .menu-item {
-    align-items: center;
-
-    /*
-     * #1127: Brand2025 defines a small gap between options
-     * and rounded corners. We achieve that using an border
-     * that simulates the gap using the menu background color.
-     */
-    border: solid var(--syn-panel-background-color);
-
-    /* Border Radius needs to be increased to cover the outline */
-    border-radius: calc(var(--syn-focus-ring-border-radius) + var(--menuitem-inset-border-vertical));
-    border-width: var(--menuitem-inset-border-horizontal) var(--menuitem-inset-border-vertical);
-    color: var(--syn-option-color);
-    font-size: var(--menuitem-font-size);
-
-    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
-    min-height: var(--menuitem-min-height, var(--syn-input-height-medium));
-    padding: 0 calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
-  }
-
-  :host(:focus-visible) .menu-item {
-    background-color: var(--syn-option-background-color-active);
-  }
-
-  /** #429: Use token for opacity */
-  .menu-item.menu-item--disabled {
-    opacity: var(--syn-opacity-50);
-  }
-
-  /**
-   * Handling for slotted prefix and suffix
-   */
-  .menu-item .menu-item__prefix::slotted(*) {
-    margin-inline-end: var(--syn-spacing-small);
-  }
-
-  .menu-item .menu-item__suffix::slotted(*) {
-    margin-inline-start: var(--syn-spacing-small);
-  }
-
-  /**
-   * Set the default font size to make icons appear correct
-   */
-  .menu-item .menu-item__prefix::slotted(syn-icon),
-  .menu-item .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color);
-    font-size: var(--syn-font-size-x-large);
-  }
-
-  :host(:hover) .menu-item .menu-item__prefix::slotted(syn-icon),
-  :host(:hover) .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover);
-  }
-
-  :host(:focus-visible) .menu-item .menu-item__prefix::slotted(syn-icon),
-  :host(:focus-visible) .menu-item .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active);
-  }
-
-  /* Adjust background and text color for focused elements */
-  /* stylelint-disable selector-not-notation, plugin/no-unsupported-browser-features */
-  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
-  .menu-item--submenu-expanded {
-    background-color: var(--syn-option-background-color-hover);
-    color: var(--syn-option-color-hover);
-  }
-  /* stylelint-enable selector-not-notation, plugin/no-unsupported-browser-features */
-
-  /**
-   * Adjust the size of icons
-   */
-  .menu-item .menu-item__chevron,
-  .menu-item .menu-item__check {
-    display: var(--display-checkmark);
-    font-size: var(--syn-font-size-x-large);
-    width: var(--syn-font-size-x-large);
-  }
-
-  /**
-   * This makes sure the chevron does not take any space if we do not have children
-   */
-  .menu-item .menu-item__chevron {
-    display: none;
-    margin-inline-start: var(--syn-spacing-small);
-  }
-
-  .menu-item .menu-item__check {
-    color: var(--syn-option-check-color);
-    margin-inline-end: var(--syn-spacing-small);
-  }
-
-  /**
-   * When in loading state, do not show the checkmark as it would bleed through
-   */
-  .menu-item--loading .menu-item__check {
-    visibility: hidden;
-  }
-
-  /**
-   * Make sure the checkbox is also visible when the item is active
-   */
-  :host(:focus-visible) .menu-item--checked .menu-item__check {
-    color: var(--syn-option-check-color-active);
-  }
-
-  :host(:hover) .menu-item--checked .menu-item__check {
-    color: var(--syn-option-check-color-hover);
-  }
-
-  /**
-   * Special handling for the submenu chevron:
-   * We are using the "chevron-down" icon per default as
-   * we do not want all chevrons to be part of the bundle
-   * Therefore, we have to transform it into the right direction
-   */
-  .menu-item .menu-item__chevron syn-icon {
-    transform: rotate(-90deg);
-  }
-
-  .menu-item--rtl .menu-item__chevron syn-icon {
-    transform: rotate(90deg);
-  }
-
-  .menu-item.menu-item--loading *:not(syn-spinner) {
-    opacity: var(--syn-opacity-50);
-  }
-
-  /**
-   * Make sure to show the chevron if there are children
-   */
-  .menu-item--has-submenu .menu-item__chevron {
-    display: flex;
-  }
-
-  /**
-   * Adjustments for the spinner in loading state
-   */
-  .menu-item--loading syn-spinner {
-    --track-width: 2px;
-
-    color: var(--syn-interactive-emphasis-color);
-    font-size: var(--syn-font-size-medium);
-    left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
-  }
-
-  /**
-   * Highlight checked items
-   */
-  .menu-item--checked .menu-item__label {
-    font-weight: var(--syn-font-weight-semibold);
-  }
-
-  /* Needed if we do not show the checkmark */
-  :host(:not([type="checkmark"]):not([loading])) .menu-item__label {
-    min-height: var(--syn-font-size-x-large);
-  }
-
-  /* #1131: Make sure that slotted menus do show the correct border radius */
-  syn-popup::part(popup) {
-    border-radius: var(--syn-input-border-radius-medium);
-  }
-
-  /**
-   * #1009: Adjust the position for submenus when they are opened to the left, too.
-   * This works because the data-current-placement attribute is set on the popup accordingly.
-   * We do not use the actual placement attribute, because it does not update when the placement changes
-   */
-  syn-popup[data-current-placement^="left"]::part(popup) {
-    margin-left: calc(-1 * var(--submenu-offset));
-  }
-`;

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

@@ -1,24 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --display-divider: block;
-  }
-
-  .menu-label__divider {
-    --spacing: 0;
-
-    display: var(--display-divider);
-    margin-bottom: var(--syn-spacing-x-small);
-  }
-
-  .menu-label {
-    color: var(--syn-input-color);
-    font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-medium);
-    font-weight: var(--syn-font-weight-semibold);
-    letter-spacing: var(--syn-letter-spacing-normal);
-    line-height: var(--syn-line-height-normal);
-    padding: var(--syn-spacing-small) var(--syn-spacing-medium);
-  }
-`;

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-tooltip/component.custom.styles.ts

@@ -1,13 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* Write custom CSS here */
-  .tooltip__body {
-    box-shadow: var(--syn-shadow-large);
-  }
-
-  /** #640: Adjust the zIndex of the arrow to make sure the box-shadow above does not bleed out */
-  :host ::part(arrow) {
-    z-index: 0 !important;
-  }
-`;