@synergy-design-system/mcp 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 2.8.0
+
+### Minor Changes
+
+- [#1192](https://github.com/synergy-design-system/synergy-design-system/pull/1192) [`31c54c0`](https://github.com/synergy-design-system/synergy-design-system/commit/31c54c04a651a14e20bc5f4b2aff1bd92ad26bc0) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-02
+
+  feat: ✨ New variant `tooltip` for `<syn-validate>` (#664)
+
+  `<syn-validate>` received the option to show validation errors using `<syn-tooltip>`.
+  To use this feature, set the `variant` property to `tooltip`.
+
 ## 2.7.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-8ed433601cf1c2dfa44ffdbdd527f2bf
+8e6d1d17a574847bbf85bc978ec6d9c9

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

@@ -1,8 +1,7 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
   :host {
     display: contents;
 
@@ -11,19 +10,54 @@ export default css`
   }
 
   .alert {
-    position: relative;
-    display: flex;
+    /* 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);
+
     align-items: stretch;
-    background-color: var(--syn-panel-background-color);
-    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);
-    border-top-width: calc(var(--syn-panel-border-width) * 3);
-    border-radius: var(--syn-border-radius-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);
+    display: flex;
     font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-small);
+    font-size: var(--size-font-size);
     font-weight: var(--syn-font-weight-normal);
-    line-height: 1.6;
-    color: var(--syn-color-neutral-700);
+    line-height: var(--syn-line-height-normal);
     margin: inherit;
+    min-height: var(--size-min-height);
+    position: relative;
+  }
+
+  /**
+   * 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);
   }
 
   .alert:not(.alert--has-icon) .alert__icon,
@@ -31,12 +65,17 @@ export default css`
     display: none;
   }
 
+  /**
+   * Make sure everything is aligned to top
+   */
   .alert__icon {
-    flex: 0 0 auto;
+    align-items: flex-start;
+    color: var(--variant-color-icon);
     display: flex;
-    align-items: center;
-    font-size: var(--syn-font-size-large);
-    padding-inline-start: var(--syn-spacing-large);
+    flex: 0 0 auto;
+    font-size: var(--size-icon-size);
+    padding-block-start: var(--size-icon-padding-block);
+    padding-inline-start: var(--size-icon-padding-inline);
   }
 
   .alert--has-countdown {
@@ -44,28 +83,34 @@ export default css`
   }
 
   .alert__message {
-    flex: 1 1 auto;
+    align-self: center;
     display: block;
-    padding: var(--syn-spacing-large);
+    flex: 1 1 auto;
+    padding: var(--size-message-padding);
   }
 
+  /**
+   * Close Icon
+   */
   .alert__close-button {
-    flex: 0 0 auto;
+    align-items: flex-start;
+    align-self: start; /* #1135: Fix alignment for the close icon */
+    color: var(--syn-typography-color-text);
     display: flex;
-    align-items: center;
-    font-size: var(--syn-font-size-medium);
-    margin-inline-end: var(--syn-spacing-medium);
-    align-self: center;
+    flex: 0 0 auto;
+    font-size: var(--size-icon-size);
+    margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
+    margin-inline-end: var(--syn-spacing-x-small);
   }
 
   .alert__countdown {
-    position: absolute;
+    background-color: var(--syn-panel-border-color);
     bottom: 0;
+    display: flex;
+    height: calc(var(--syn-panel-border-width) * 3);
     left: 0;
+    position: absolute;
     width: 100%;
-    height: calc(var(--syn-panel-border-width) * 3);
-    background-color: var(--syn-panel-border-color);
-    display: flex;
   }
 
   .alert__countdown--ltr {
@@ -97,6 +142,61 @@ export default css`
     background-color: var(--syn-color-danger-600);
   }
 
+  /**
+   * 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);
+  }
+
   .alert__timer {
     display: none;
   }

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

@@ -13,7 +13,6 @@ import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynIconButton from '../icon-button/icon-button.component.js';
 import styles from './alert.styles.js';
-import customStyles from './alert.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
@@ -44,7 +43,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynAlert')
 export default class SynAlert extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'syn-icon-button': SynIconButton };
 
   private autoHideTimeout: number;

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

@@ -1,8 +1,6 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
     --arrow-color: var(--syn-color-neutral-1000);
     --arrow-size: 6px;
@@ -18,10 +16,22 @@ export default css`
   }
 
   .popup {
-    position: absolute;
     isolation: isolate;
-    max-width: var(--auto-size-available-width, none);
     max-height: var(--auto-size-available-height, none);
+    max-width: var(--auto-size-available-width, none);
+    position: absolute;
+
+    :where(&) {
+      background: unset;
+      border: unset;
+      color: unset;
+      height: unset;
+      inset: unset;
+      margin: unset;
+      overflow: unset;
+      padding: unset;
+      width: unset;
+    }
   }
 
   .popup--fixed {
@@ -33,31 +43,28 @@ export default css`
   }
 
   .popup__arrow {
-    position: absolute;
-    width: calc(var(--arrow-size-diagonal) * 2);
+    background: var(--arrow-color);
     height: calc(var(--arrow-size-diagonal) * 2);
+    position: absolute;
     rotate: 45deg;
-    background: var(--arrow-color);
+    width: calc(var(--arrow-size-diagonal) * 2);
     z-index: -1;
   }
 
   /* Hover bridge */
-  .popup-hover-bridge:not(.popup-hover-bridge--visible) {
-    display: none;
-  }
-
   .popup-hover-bridge {
-    position: fixed;
-    z-index: calc(var(--syn-z-index-dropdown) - 1);
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     clip-path: polygon(
       var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
       var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
       var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
       var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
     );
+    inset: 0;
+    position: fixed;
+    z-index: calc(var(--syn-z-index-dropdown) - 1);
+  }
+
+  .popup-hover-bridge:not(.popup-hover-bridge--visible) {
+    display: none;
   }
 `;

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

@@ -9,7 +9,6 @@ import { property, query } from 'lit/decorators.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './popup.styles.js';
-import customStyles from './popup.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 const SUPPORTS_POPOVER = globalThis?.HTMLElement?.prototype.hasOwnProperty('popover');
@@ -58,7 +57,7 @@ function isVirtualElement(e: unknown): e is VirtualElement {
  *  available when using `auto-size`.
  */
 export default class SynPopup extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   private anchorEl: Element | VirtualElement | null;
   private cleanup: ReturnType<typeof autoUpdate> | undefined;

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

@@ -1,8 +1,7 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable property-no-vendor-prefix */
   :host {
     --max-width: 20rem;
     --hide-delay: 0ms;
@@ -11,6 +10,11 @@ export default css`
     display: contents;
   }
 
+  /** #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;
+  }
+
   .tooltip {
     --arrow-size: var(--syn-tooltip-arrow-size);
     --arrow-color: var(--syn-tooltip-background-color);
@@ -37,21 +41,22 @@ export default css`
   }
 
   .tooltip__body {
-    display: block;
-    width: max-content;
-    max-width: var(--max-width);
-    border-radius: var(--syn-tooltip-border-radius);
     background-color: var(--syn-tooltip-background-color);
+    border-radius: var(--syn-tooltip-border-radius);
+    box-shadow: var(--syn-shadow-large);
+    color: var(--syn-tooltip-color);
+    display: block;
     font-family: var(--syn-tooltip-font-family);
     font-size: var(--syn-tooltip-font-size);
     font-weight: var(--syn-tooltip-font-weight);
     line-height: var(--syn-tooltip-line-height);
-    text-align: start;
-    white-space: normal;
-    color: var(--syn-tooltip-color);
+    max-width: var(--max-width);
     padding: var(--syn-tooltip-padding);
     pointer-events: none;
-    user-select: none;
+    text-align: start;
     -webkit-user-select: none;
+    user-select: none;
+    white-space: normal;
+    width: max-content;
   }
 `;

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

@@ -4,15 +4,15 @@ import { classMap } from 'lit/directives/class-map.js';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
-import { property, query } from 'lit/decorators.js';
+import { property, state, query } from 'lit/decorators.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynPopup from '../popup/popup.component.js';
 import styles from './tooltip.styles.js';
-import customStyles from './tooltip.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
+import type { VirtualElement } from '../popup/popup.component.js';
 
 /**
  * @summary Tooltips display additional information based on a specific action.
@@ -43,7 +43,7 @@ import type { CSSResultGroup } from 'lit';
  * @animation tooltip.hide - The animation to use when hiding the tooltip.
  */
 export default class SynTooltip extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'syn-popup': SynPopup };
 
   private hoverTimeout: number;
@@ -54,6 +54,13 @@ export default class SynTooltip extends SynergyElement {
   @query('.tooltip__body') body: HTMLElement;
   @query('syn-popup') popup: SynPopup;
 
+  /**
+   * The element the tooltip will be anchored to. If the anchor lives outside of the tooltip, you can provide the anchor
+   * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the tooltip, use the
+   * `anchor` slot instead.
+   */
+  @state() private anchor: Element | string | VirtualElement | undefined = undefined;
+
   /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
   @property() content = '';
 
@@ -214,7 +221,7 @@ export default class SynTooltip extends SynergyElement {
     }
   }
 
-  @watch(['content', 'distance','placement', 'skidding'])
+  @watch(['anchor', 'content', 'distance','placement', 'skidding'])
   async handleOptionsChange() {
     if (this.hasUpdated) {
       await this.updateComplete;
@@ -258,6 +265,7 @@ export default class SynTooltip extends SynergyElement {
   render() {
     return html`
       <syn-popup
+        .anchor=${this.anchor}
         part="base"
         exportparts="
           popup:base__popup,
@@ -275,7 +283,7 @@ export default class SynTooltip extends SynergyElement {
         arrow
         hover-bridge
       >
-        ${'' /* eslint-disable-next-line lit-a11y/no-aria-slot */}
+        ${'' /* Always render slotted content in anchor position - it's always visible */}
         <slot slot="anchor" aria-describedby="tooltip"></slot>
 
         ${'' /* eslint-disable-next-line lit-a11y/accessible-name */}

package/metadata/packages/components/components/syn-validate/component.angular.ts

@@ -22,16 +22,24 @@ import '@synergy-design-system/components/components/validate/validate.js';
  * and showing the validation message in a consistent, user defined way.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
  * @dependency syn-alert
+ * @dependency syn-tooltip
  *
  * @slot - The form field that should be validated.
  * Avoid slotting in more than one element, as subsequent ones will be ignored.
  *
  * @csspart base - The component's base wrapper.
  * @csspart input-wrapper - The container that wraps the form field.
+ *
  * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
  * @csspart alert__base - The container that wraps the alert.
  * @csspart alert__message - The container that wraps the alert message.
  * @csspart alert__icon - The container that wraps the alert icon.
+ *
+ * @csspart tooltip - The syn-tooltip that is shown when the variant is set to "tooltip".
+ * @csspart tooltip__base - The container that wraps the tooltip.
+ * @csspart tooltip__popup - The container that wraps the tooltip popup.
+ * @csspart tooltip__arrow - The container that wraps the tooltip arrow.
+ * @csspart tooltip__body - The container that wraps the tooltip body.
  */
 @Component({
   selector: 'syn-validate',
@@ -52,6 +60,7 @@ export class SynValidateComponent {
 
 The following variants are supported:
 - **native** (default): Uses the native browser validation, usually a browser tooltip.
+- **tooltip**: Show the validation message as a tooltip using a `<syn-tooltip>`.
 - **inline**: Show the validation message underneath the element, using a `<syn-alert>`
  */
   @Input()

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

@@ -16,16 +16,24 @@ Component.define('syn-validate');
  * and showing the validation message in a consistent, user defined way.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
  * @dependency syn-alert
+ * @dependency syn-tooltip
  *
  * @slot - The form field that should be validated.
  * Avoid slotting in more than one element, as subsequent ones will be ignored.
  *
  * @csspart base - The component's base wrapper.
  * @csspart input-wrapper - The container that wraps the form field.
+ *
  * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
  * @csspart alert__base - The container that wraps the alert.
  * @csspart alert__message - The container that wraps the alert message.
  * @csspart alert__icon - The container that wraps the alert icon.
+ *
+ * @csspart tooltip - The syn-tooltip that is shown when the variant is set to "tooltip".
+ * @csspart tooltip__base - The container that wraps the tooltip.
+ * @csspart tooltip__popup - The container that wraps the tooltip popup.
+ * @csspart tooltip__arrow - The container that wraps the tooltip arrow.
+ * @csspart tooltip__body - The container that wraps the tooltip body.
  */
 export const SynValidate = createComponent({
   displayName: 'SynValidate',

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

@@ -1,14 +1,21 @@
 import type { CSSResultGroup, PropertyValues } from 'lit';
 import { html } from 'lit';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import {
+  property,
+  query,
+  queryAssignedElements,
+  state,
+} from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import type SynInput from '../input/input.component.js';
 import { watch } from '../../internal/watch.js';
 import SynAlert from '../alert/alert.component.js';
+import SynTooltip from '../tooltip/tooltip.component.js';
 import {
   alertSizeForInput,
+  getActualInputElement,
   getEventNameForElement,
   isBlurEvent,
   isInvalidEvent,
@@ -18,29 +25,49 @@ import {
 import styles from './validate.styles.js';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
+/**
+ * Utility function that renders the default slot content.
+ * This is needed to avoid code duplication when rendering the default slot in both the tooltip and the regular render function.
+ */
+const renderDefaultSlot = () => html`
+  <slot
+    class="validate__input-wrapper"
+    part="input-wrapper"
+  ></slot>
+`;
+
 /**
  * @summary Validate provides form field validation messages in a unified way.
  * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
  * and showing the validation message in a consistent, user defined way.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
  * @dependency syn-alert
+ * @dependency syn-tooltip
  *
  * @slot - The form field that should be validated.
  * Avoid slotting in more than one element, as subsequent ones will be ignored.
  *
  * @csspart base - The component's base wrapper.
  * @csspart input-wrapper - The container that wraps the form field.
+ *
  * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
  * @csspart alert__base - The container that wraps the alert.
  * @csspart alert__message - The container that wraps the alert message.
  * @csspart alert__icon - The container that wraps the alert icon.
- */
+ *
+ * @csspart tooltip - The syn-tooltip that is shown when the variant is set to "tooltip".
+ * @csspart tooltip__base - The container that wraps the tooltip.
+ * @csspart tooltip__popup - The container that wraps the tooltip popup.
+ * @csspart tooltip__arrow - The container that wraps the tooltip arrow.
+ * @csspart tooltip__body - The container that wraps the tooltip body.
+*/
 @enableDefaultSettings('SynValidate')
 export default class SynValidate extends SynergyElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 
   static dependencies = {
     'syn-alert': SynAlert,
+    'syn-tooltip': SynTooltip,
   };
 
   controller = new AbortController();
@@ -51,6 +78,8 @@ export default class SynValidate extends SynergyElement {
 
   @queryAssignedElements() private slottedChildren: HTMLElement[];
 
+  @query('syn-tooltip') private tooltipElement?: SynTooltip;
+
   @state() validationMessage = '';
 
   @state() eagerFirstMount = true;
@@ -61,14 +90,17 @@ export default class SynValidate extends SynergyElement {
 
   @state() alertSize?: SynInput['size'];
 
+  @state() hasFocus = false;
+
   /**
    * The variant that should be used to show validation alerts.
    *
    * The following variants are supported:
    * - **native** (default): Uses the native browser validation, usually a browser tooltip.
+   * - **tooltip**: Show the validation message as a tooltip using a `<syn-tooltip>`.
    * - **inline**: Show the validation message underneath the element, using a `<syn-alert>`
    */
-  @property({ reflect: true }) variant: 'native' | 'inline' = 'native';
+  @property({ reflect: true }) variant: 'native' | 'tooltip' | 'inline' = 'native';
 
   /** Do not show the error icon when using the inline variant validation */
   @property({ attribute: 'hide-icon', reflect: true, type: Boolean }) hideIcon = false;
@@ -235,6 +267,20 @@ export default class SynValidate extends SynergyElement {
         signal: this.controller.signal,
       });
     }
+
+    // #664: Add focus/blur listeners specifically for tooltip variant
+    // This is needed because we want to show the tooltip on focus and hide it on blur, but only when using the tooltip variant.
+    // Otherwise, this would interfere with the native validation tooltip, which also relies on focus and blur events.
+    const focusEvent = getEventNameForElement(input, 'focus');
+    const blurEvent = getEventNameForElement(input, 'blur');
+
+    input.addEventListener(focusEvent, this.handleInputFocus, {
+      signal: this.controller.signal,
+    });
+
+    input.addEventListener(blurEvent, this.handleInputBlur, {
+      signal: this.controller.signal,
+    });
   }
 
   private setValidationMessage(input: HTMLInputElement) {
@@ -266,6 +312,17 @@ export default class SynValidate extends SynergyElement {
     }
   };
 
+  /**
+   * Handle focus/blur events for tooltip variant
+   */
+  private handleInputFocus = () => {
+    this.hasFocus = true;
+  };
+
+  private handleInputBlur = () => {
+    this.hasFocus = false;
+  };
+
   /**
    * Handle the blur event during validation
    */
@@ -439,6 +496,36 @@ export default class SynValidate extends SynergyElement {
     this?.sizeObserver?.disconnect();
   }
 
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    // #664: Make sure to update the syn-tooltip if the validation state changes when using the tooltip variant
+    if (this.variant !== 'tooltip') {
+      return;
+    }
+
+    const tooltip = this.tooltipElement;
+
+    if (!tooltip) {
+      return;
+    }
+
+    // When we have a valid tooltip,
+    // we need to update the content and show or hide it based on the validation state and focus state.
+    // We have to do this manually, as there is a problem when updating open and content at the same time.
+    // The order is critical: fill before showing, don´t update the content during hide.
+    const shouldShowTooltip = !this.isValid && this.validationMessage && this.hasFocus;
+
+    if (shouldShowTooltip) {
+      tooltip.content = this.validationMessage;
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      tooltip.show();
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      tooltip.hide();
+    }
+  }
+
   private renderInlineValidation() {
     if (this.variant !== 'inline' || !this.validationMessage) {
       return '';
@@ -462,16 +549,27 @@ export default class SynValidate extends SynergyElement {
   }
 
   render() {
+    // #664: When using the tooltip variant, we need to wrap the default slot in a tooltip when the input is invalid and has a validation message.
+    const slotContent = this.variant === 'tooltip'
+      ? html`
+        <syn-tooltip
+          .anchor=${getActualInputElement(this.getInput()) as Element ?? undefined}
+          exportparts="base:tooltip__base,base__popup:tooltip__popup,base__arrow:tooltip__arrow,body:tooltip__body"
+          .open=${this.eager ? !this.isValid && this.validationMessage.length > 0 : false}
+          part="tooltip"
+          placement="bottom"
+          trigger="manual"
+        >
+          ${renderDefaultSlot()}
+        </syn-tooltip>
+      ` : renderDefaultSlot();
+
     return html`
       <div
         class="validate"
         part="base"
       >
-        <slot
-          class="validate__input-wrapper"
-          part="input-wrapper"
-        ></slot>
-        
+        ${slotContent}
         ${this.renderInlineValidation()}
       </div>
     `;

package/metadata/packages/components/components/syn-validate/component.vue

@@ -11,16 +11,24 @@
  * and showing the validation message in a consistent, user defined way.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
  * @dependency syn-alert
+ * @dependency syn-tooltip
  *
  * @slot - The form field that should be validated.
  * Avoid slotting in more than one element, as subsequent ones will be ignored.
  *
  * @csspart base - The component's base wrapper.
  * @csspart input-wrapper - The container that wraps the form field.
+ *
  * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
  * @csspart alert__base - The container that wraps the alert.
  * @csspart alert__message - The container that wraps the alert message.
  * @csspart alert__icon - The container that wraps the alert icon.
+ *
+ * @csspart tooltip - The syn-tooltip that is shown when the variant is set to "tooltip".
+ * @csspart tooltip__base - The container that wraps the tooltip.
+ * @csspart tooltip__popup - The container that wraps the tooltip popup.
+ * @csspart tooltip__arrow - The container that wraps the tooltip arrow.
+ * @csspart tooltip__body - The container that wraps the tooltip body.
  */
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/validate/validate.js';
@@ -41,6 +49,7 @@ const props = defineProps<{
 
 The following variants are supported:
 - **native** (default): Uses the native browser validation, usually a browser tooltip.
+- **tooltip**: Show the validation message as a tooltip using a `<syn-tooltip>`.
 - **inline**: Show the validation message underneath the element, using a `<syn-alert>`
  */
   variant?: SynValidate['variant'];

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 3.6.0
+
+### Minor Changes
+
+- [#1192](https://github.com/synergy-design-system/synergy-design-system/pull/1192) [`31c54c0`](https://github.com/synergy-design-system/synergy-design-system/commit/31c54c04a651a14e20bc5f4b2aff1bd92ad26bc0) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-02
+
+  feat: ✨ New variant `tooltip` for `<syn-validate>` (#664)
+
+  `<syn-validate>` received the option to show validation errors using `<syn-tooltip>`.
+  To use this feature, set the `variant` property to `tooltip`.
+
+### Patch Changes
+
+- Updated dependencies [[`31c54c0`](https://github.com/synergy-design-system/synergy-design-system/commit/31c54c04a651a14e20bc5f4b2aff1bd92ad26bc0)]:
+  - @synergy-design-system/tokens@3.6.0
+
 ## 3.5.0
 
 ### Minor Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 3.6.0
+
+### Minor Changes
+
+- [#1192](https://github.com/synergy-design-system/synergy-design-system/pull/1192) [`31c54c0`](https://github.com/synergy-design-system/synergy-design-system/commit/31c54c04a651a14e20bc5f4b2aff1bd92ad26bc0) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-02
+
+  feat: ✨ New variant `tooltip` for `<syn-validate>` (#664)
+
+  `<syn-validate>` received the option to show validation errors using `<syn-tooltip>`.
+  To use this feature, set the `variant` property to `tooltip`.
+
 ## 3.5.0
 
 ### Minor Changes

package/metadata/packages/tokens/dark.css

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

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.1
+ * @synergy-design-system/tokens version 3.5.0
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

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

package/metadata/packages/tokens/sick2018_dark.css

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

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.5.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.5.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.5.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

@@ -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/eslint-config-syn": "^0.1.0",
     "@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.0",
+    "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/styles": "2.0.1"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.7.0",
+  "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-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;
-  }
-`;