@synergy-design-system/react 3.5.0 → 3.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @synergy-design-system/react
 
+## 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/components@3.6.0
+  - @synergy-design-system/tokens@3.6.0
+
 ## 3.5.0
 
 ### Patch Changes

package/dist/chunks/{chunk.EL2F4LIK.js → chunk.NDVLOP3B.js}

@@ -15,4 +15,4 @@ var SynValidate = createComponent({
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.EL2F4LIK.js.map
+//# sourceMappingURL=chunk.NDVLOP3B.js.map

package/dist/chunks/{chunk.EL2F4LIK.js.map → chunk.NDVLOP3B.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/validate.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/validate/validate.component.js';\n\nconst tagName = 'syn-validate';\nComponent.define('syn-validate');\n\n/**\n * @summary Validate provides form field validation messages in a unified way.\n * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n * and showing the validation message in a consistent, user defined way.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs\n * @dependency syn-alert\n *\n * @slot - The form field that should be validated.\n * Avoid slotting in more than one element, as subsequent ones will be ignored.\n *\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the form field.\n * @csspart alert - The syn-alert that is shown when the variant is set to \"inline\".\n * @csspart alert__base - The container that wraps the alert.\n * @csspart alert__message - The container that wraps the alert message.\n * @csspart alert__icon - The container that wraps the alert icon.\n */\nexport const SynValidate = createComponent({\n  displayName: 'SynValidate',\n  elementClass: Component,\n  events: {},\n  react: React,\n  tagName,\n});\n"],
-  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAEtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AAmBxB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,OAAO;AAAA,EACP;AACF,CAAC;",
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/validate/validate.component.js';\n\nconst tagName = 'syn-validate';\nComponent.define('syn-validate');\n\n/**\n * @summary Validate provides form field validation messages in a unified way.\n * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n * and showing the validation message in a consistent, user defined way.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs\n * @dependency syn-alert\n * @dependency syn-tooltip\n *\n * @slot - The form field that should be validated.\n * Avoid slotting in more than one element, as subsequent ones will be ignored.\n *\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the form field.\n *\n * @csspart alert - The syn-alert that is shown when the variant is set to \"inline\".\n * @csspart alert__base - The container that wraps the alert.\n * @csspart alert__message - The container that wraps the alert message.\n * @csspart alert__icon - The container that wraps the alert icon.\n *\n * @csspart tooltip - The syn-tooltip that is shown when the variant is set to \"tooltip\".\n * @csspart tooltip__base - The container that wraps the tooltip.\n * @csspart tooltip__popup - The container that wraps the tooltip popup.\n * @csspart tooltip__arrow - The container that wraps the tooltip arrow.\n * @csspart tooltip__body - The container that wraps the tooltip body.\n */\nexport const SynValidate = createComponent({\n  displayName: 'SynValidate',\n  elementClass: Component,\n  events: {},\n  react: React,\n  tagName,\n});\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAEtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AA2BxB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,OAAO;AAAA,EACP;AACF,CAAC;",
   "names": []
 }

package/dist/components/validate.d.ts

@@ -5,15 +5,23 @@ import Component from '@synergy-design-system/components/components/validate/val
  * 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 declare const SynValidate: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/validate.js

@@ -1,6 +1,6 @@
 import {
   SynValidate
-} from "../chunks/chunk.EL2F4LIK.js";
+} from "../chunks/chunk.NDVLOP3B.js";
 export {
   SynValidate
 };

package/dist/index.js

@@ -1,6 +1,3 @@
-import {
-  SynSwitch
-} from "./chunks/chunk.3AUZZVYZ.js";
 import {
   SynTabGroup
 } from "./chunks/chunk.5GCIGA47.js";
@@ -21,10 +18,7 @@ import {
 } from "./chunks/chunk.GRD6B33U.js";
 import {
   SynValidate
-} from "./chunks/chunk.EL2F4LIK.js";
-import {
-  SynRadioButton
-} from "./chunks/chunk.2LDP5CAQ.js";
+} from "./chunks/chunk.NDVLOP3B.js";
 import {
   SynRadioGroup
 } from "./chunks/chunk.5CIFYMXU.js";
@@ -47,8 +41,8 @@ import {
   SynSpinner
 } from "./chunks/chunk.SOARUKQP.js";
 import {
-  SynMenu
-} from "./chunks/chunk.4IVJHGWM.js";
+  SynSwitch
+} from "./chunks/chunk.3AUZZVYZ.js";
 import {
   SynNavItem
 } from "./chunks/chunk.EFKHCKYH.js";
@@ -71,8 +65,8 @@ import {
   SynProgressRing
 } from "./chunks/chunk.ADSD2U7G.js";
 import {
-  SynDropdown
-} from "./chunks/chunk.AE6RZ4W2.js";
+  SynRadioButton
+} from "./chunks/chunk.2LDP5CAQ.js";
 import {
   SynFile
 } from "./chunks/chunk.IQB5SV6K.js";
@@ -95,8 +89,8 @@ import {
   SynMenuLabel
 } from "./chunks/chunk.BTEVTUXU.js";
 import {
-  SynButton
-} from "./chunks/chunk.TGSZHDUW.js";
+  SynMenu
+} from "./chunks/chunk.4IVJHGWM.js";
 import {
   SynCard
 } from "./chunks/chunk.OJAJTT5S.js";
@@ -118,6 +112,9 @@ import {
 import {
   SynDrawer
 } from "./chunks/chunk.RWOJEMSX.js";
+import {
+  SynDropdown
+} from "./chunks/chunk.AE6RZ4W2.js";
 import {
   SynAccordion
 } from "./chunks/chunk.2PS5VOXM.js";
@@ -136,6 +133,9 @@ import {
 import {
   SynButtonGroup
 } from "./chunks/chunk.HHPIABBV.js";
+import {
+  SynButton
+} from "./chunks/chunk.TGSZHDUW.js";
 export {
   SynAccordion,
   SynAlert,

package/dist/types/syn-jsx-elements.d.ts

@@ -1643,16 +1643,24 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * 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 type SynValidateJSXElement = SynCustomElement<SynValidate, []>;
 declare module 'react' {
     interface CSSProperties {
@@ -2845,16 +2853,24 @@ declare module 'react' {
              * 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.
              */ 'syn-validate': SynValidateJSXElement;
         }
     }

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@synergy-design-system/components": "3.5.0"
+    "@synergy-design-system/components": "3.6.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -43,12 +43,12 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "devDependencies": {
     "@types/react": "^19.2.14",
     "react": "^19.2.4"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "3.5.0"
+    "@synergy-design-system/tokens": "3.6.0"
   }
 }