@synergy-design-system/mcp 2.6.1 → 2.8.0

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

@@ -1,28 +1,29 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
+  /* stylelint-disable property-no-vendor-prefix */
   :host {
     display: block;
   }
 
   .textarea {
-    display: grid;
     align-items: center;
-    position: relative;
-    width: 100%;
+    cursor: text;
+    display: grid;
     font-family: var(--syn-input-font-family);
     font-weight: var(--syn-input-font-weight);
-    line-height: var(--syn-line-height-normal);
     letter-spacing: var(--syn-input-letter-spacing);
-    vertical-align: middle;
+    line-height: var(--syn-line-height-normal);
+    position: relative;
     transition:
       var(--syn-transition-fast) color,
       var(--syn-transition-fast) border,
       var(--syn-transition-fast) box-shadow,
       var(--syn-transition-fast) background-color;
-    cursor: text;
+    vertical-align: middle;
+    width: 100%;
   }
 
   /* Standard textareas */
@@ -35,6 +36,7 @@ export default css`
     background-color: var(--syn-input-background-color-hover);
     border-color: var(--syn-input-border-color-hover);
   }
+
   .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
     color: var(--syn-input-color-hover);
   }
@@ -42,8 +44,8 @@ export default css`
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
     background-color: var(--syn-input-background-color-focus);
     border-color: var(--syn-input-border-color-focus);
-    color: var(--syn-input-color-focus);
     box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
+    color: var(--syn-input-color-focus);
   }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
@@ -53,8 +55,8 @@ export default css`
   .textarea--standard.textarea--disabled {
     background-color: var(--syn-input-background-color-disabled);
     border-color: var(--syn-input-border-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
   }
 
   .textarea__control,
@@ -63,9 +65,9 @@ export default css`
   }
 
   .textarea__size-adjuster {
-    visibility: hidden;
-    pointer-events: none;
     opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
   }
 
   .textarea--standard.textarea--disabled .textarea__control {
@@ -78,8 +80,8 @@ export default css`
 
   /* Readonly textareas */
   .textarea--readonly {
-    border: none;
     background-color: var(--syn-input-readonly-background-color);
+    border: none;
     color: var(--syn-input-color);
   }
 
@@ -95,21 +97,29 @@ export default css`
 
   .textarea--readonly.textarea--disabled {
     background-color: var(--syn-input-readonly-background-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity);
   }
 
   .textarea__control {
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: var(--syn-input-color);
+    cursor: inherit;
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
     line-height: 1.4;
-    color: var(--syn-input-color);
-    border: none;
-    background: none;
-    box-shadow: none;
-    cursor: inherit;
-    -webkit-appearance: none;
+
+    /*
+    Unfortunately we need to add a small margin to the textarea control. This is needed for the new sick 2025 theme,
+    as because of the big border-radius the resize icon will otherwise overlap with the border
+    This added margin needs to be subtracted from the padding of the textarea
+    */
+    margin: var(--syn-spacing-3x-small);
   }
 
   .textarea__control::-webkit-search-decoration,
@@ -117,12 +127,13 @@ export default css`
   .textarea__control::-webkit-search-results-button,
   .textarea__control::-webkit-search-results-decoration {
     -webkit-appearance: none;
+    appearance: none;
   }
 
   .textarea__control::placeholder {
     color: var(--syn-input-placeholder-color);
-    user-select: none;
     -webkit-user-select: none;
+    user-select: none;
   }
 
   .textarea__control:focus {
@@ -132,14 +143,17 @@ export default css`
   /*
    * Size modifiers
    */
-
   .textarea--small {
     border-radius: var(--syn-input-border-radius-small);
     font-size: var(--syn-input-font-size-small);
   }
 
   .textarea--small .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-small);
+    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
+      but we have different (coming from shoelace) */
+
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-small) - var(--syn-spacing-3x-small));
   }
 
   .textarea--medium {
@@ -148,7 +162,8 @@ export default css`
   }
 
   .textarea--medium .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-medium);
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-medium) - var(--syn-spacing-3x-small));
   }
 
   .textarea--large {
@@ -157,13 +172,16 @@ export default css`
   }
 
   .textarea--large .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-large);
+    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
+      but we have different (coming from shoelace) */
+
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-large) - var(--syn-spacing-3x-small));
   }
 
   /*
    * Resize types
    */
-
   .textarea--resize-none .textarea__control {
     resize: none;
   }
@@ -174,7 +192,17 @@ export default css`
 
   .textarea--resize-auto .textarea__control {
     height: auto;
-    resize: none;
     overflow-y: hidden;
+    resize: none;
+  }
+
+  /* Validation */
+  :host([data-user-invalid]) .textarea--standard {
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  :host([data-user-invalid]) .textarea--standard.textarea--focused:not(.textarea--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);
   }
 `;

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

@@ -10,10 +10,8 @@ import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import formControlStyles from '../../styles/form-control.styles.js';
-import formControlCustomStyles from '../../styles/form-control.custom.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './textarea.styles.js';
-import customStyles from './textarea.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type { SynergyFormControl } from '../../internal/synergy-element.js';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
@@ -42,7 +40,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynTextarea')
 export default class SynTextarea extends SynergyElement implements SynergyFormControl {
-  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['syn-blur', 'syn-input']

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'];