@synergy-design-system/components 3.6.1 → 3.7.0

package/dist/components/tooltip/tooltip.component.js

@@ -1,17 +1,17 @@
 import {
   SynTooltip
-} from "../../chunks/chunk.6VJY3TRA.js";
+} from "../../chunks/chunk.4HSS7ZGG.js";
 import "../../chunks/chunk.EQUDFX74.js";
-import "../../chunks/chunk.AOOC5ALQ.js";
+import "../../chunks/chunk.WQWJ7ORM.js";
 import "../../chunks/chunk.3334XOIY.js";
 import "../../chunks/chunk.LQDIH4Z5.js";
 import "../../chunks/chunk.Q6HZ4JXR.js";
 import "../../chunks/chunk.RJUVM6NO.js";
-import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.QLETXF4A.js";
 import "../../chunks/chunk.BHJVE26D.js";
+import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.2NT3B5WJ.js";
-import "../../chunks/chunk.IUFTAV2I.js";
+import "../../chunks/chunk.I4M3MYDP.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   SynTooltip as default

package/dist/components/tooltip/tooltip.js

@@ -1,18 +1,18 @@
 import {
   tooltip_default
-} from "../../chunks/chunk.ZOW7OV2U.js";
-import "../../chunks/chunk.6VJY3TRA.js";
+} from "../../chunks/chunk.6N5QEKIJ.js";
+import "../../chunks/chunk.4HSS7ZGG.js";
 import "../../chunks/chunk.EQUDFX74.js";
-import "../../chunks/chunk.AOOC5ALQ.js";
+import "../../chunks/chunk.WQWJ7ORM.js";
 import "../../chunks/chunk.3334XOIY.js";
 import "../../chunks/chunk.LQDIH4Z5.js";
 import "../../chunks/chunk.Q6HZ4JXR.js";
 import "../../chunks/chunk.RJUVM6NO.js";
-import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.QLETXF4A.js";
 import "../../chunks/chunk.BHJVE26D.js";
+import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.2NT3B5WJ.js";
-import "../../chunks/chunk.IUFTAV2I.js";
+import "../../chunks/chunk.I4M3MYDP.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   tooltip_default as default

package/dist/components/validate/utility.js

@@ -7,8 +7,8 @@ import {
   isInvalidEvent,
   isSynergyElement,
   normalizeEventAttribute
-} from "../../chunks/chunk.4GDY7NEK.js";
-import "../../chunks/chunk.IUFTAV2I.js";
+} from "../../chunks/chunk.ISXCFMOK.js";
+import "../../chunks/chunk.I4M3MYDP.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   alertSizeForInput,

package/dist/components/validate/validate.component.d.ts

@@ -117,6 +117,13 @@ export default class SynValidate extends SynergyElement {
      * Update the events on the input element.
      */
     private updateEvents;
+    /**
+     * #851: Get the validation message that should be displayed to the user.
+     * Prioritizes customValidationMessage over the internal validationMessage state.
+     * This is needed because frameworks may clear the internal validation message on
+     * dynamically rendered elements, but the customValidationMessage is still valid.
+     */
+    private getDisplayValidationMessage;
     private setValidationMessage;
     /**
      * Set the custom validation message to the input. This will make sure to either:

package/dist/components/validate/validate.component.js

@@ -1,23 +1,22 @@
 import {
   SynValidate
-} from "../../chunks/chunk.3XZMOCG6.js";
+} from "../../chunks/chunk.K42TDMJB.js";
+import "../../chunks/chunk.ISXCFMOK.js";
 import "../../chunks/chunk.MVM3NN6Y.js";
-import "../../chunks/chunk.4GDY7NEK.js";
-import "../../chunks/chunk.6VJY3TRA.js";
+import "../../chunks/chunk.4HSS7ZGG.js";
 import "../../chunks/chunk.EQUDFX74.js";
-import "../../chunks/chunk.AOOC5ALQ.js";
+import "../../chunks/chunk.WQWJ7ORM.js";
 import "../../chunks/chunk.3334XOIY.js";
-import "../../chunks/chunk.SSOL4LVM.js";
+import "../../chunks/chunk.U56V7VEW.js";
 import "../../chunks/chunk.WXVOTRW5.js";
-import "../../chunks/chunk.QOBJ2NX5.js";
+import "../../chunks/chunk.RWPFRMHS.js";
 import "../../chunks/chunk.OQUVO5QW.js";
 import "../../chunks/chunk.DAIQ5WRI.js";
 import "../../chunks/chunk.LQDIH4Z5.js";
 import "../../chunks/chunk.Q6HZ4JXR.js";
 import "../../chunks/chunk.RJUVM6NO.js";
 import "../../chunks/chunk.CHFWLQN5.js";
-import "../../chunks/chunk.UA5B6CPN.js";
-import "../../chunks/chunk.LJNMLUJK.js";
+import "../../chunks/chunk.Y6AOTVOC.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.4XZTYPIY.js";
 import "../../chunks/chunk.NMWM3BP7.js";
@@ -25,17 +24,18 @@ import "../../chunks/chunk.RODNHT5C.js";
 import "../../chunks/chunk.3RR4RIR7.js";
 import "../../chunks/chunk.66HKI7Q7.js";
 import "../../chunks/chunk.VBS3JEIP.js";
-import "../../chunks/chunk.PLV4PZYX.js";
-import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.QLETXF4A.js";
 import "../../chunks/chunk.BHJVE26D.js";
-import "../../chunks/chunk.YACUYJZN.js";
-import "../../chunks/chunk.RY3ZM7MQ.js";
-import "../../chunks/chunk.VL3GX6WV.js";
-import "../../chunks/chunk.VMLERD3J.js";
+import "../../chunks/chunk.PLV4PZYX.js";
+import "../../chunks/chunk.5YZ63VR2.js";
+import "../../chunks/chunk.JEJO727M.js";
+import "../../chunks/chunk.JIHDB74M.js";
+import "../../chunks/chunk.ST3G47SZ.js";
 import "../../chunks/chunk.QDG5AJZX.js";
+import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.2NT3B5WJ.js";
-import "../../chunks/chunk.IUFTAV2I.js";
+import "../../chunks/chunk.I4M3MYDP.js";
+import "../../chunks/chunk.UA5B6CPN.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   SynValidate as default

package/dist/components/validate/validate.js

@@ -1,24 +1,23 @@
 import {
   validate_default
-} from "../../chunks/chunk.5QUHHGOD.js";
-import "../../chunks/chunk.3XZMOCG6.js";
+} from "../../chunks/chunk.P7UFHJJO.js";
+import "../../chunks/chunk.K42TDMJB.js";
+import "../../chunks/chunk.ISXCFMOK.js";
 import "../../chunks/chunk.MVM3NN6Y.js";
-import "../../chunks/chunk.4GDY7NEK.js";
-import "../../chunks/chunk.6VJY3TRA.js";
+import "../../chunks/chunk.4HSS7ZGG.js";
 import "../../chunks/chunk.EQUDFX74.js";
-import "../../chunks/chunk.AOOC5ALQ.js";
+import "../../chunks/chunk.WQWJ7ORM.js";
 import "../../chunks/chunk.3334XOIY.js";
-import "../../chunks/chunk.SSOL4LVM.js";
+import "../../chunks/chunk.U56V7VEW.js";
 import "../../chunks/chunk.WXVOTRW5.js";
-import "../../chunks/chunk.QOBJ2NX5.js";
+import "../../chunks/chunk.RWPFRMHS.js";
 import "../../chunks/chunk.OQUVO5QW.js";
 import "../../chunks/chunk.DAIQ5WRI.js";
 import "../../chunks/chunk.LQDIH4Z5.js";
 import "../../chunks/chunk.Q6HZ4JXR.js";
 import "../../chunks/chunk.RJUVM6NO.js";
 import "../../chunks/chunk.CHFWLQN5.js";
-import "../../chunks/chunk.UA5B6CPN.js";
-import "../../chunks/chunk.LJNMLUJK.js";
+import "../../chunks/chunk.Y6AOTVOC.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.4XZTYPIY.js";
 import "../../chunks/chunk.NMWM3BP7.js";
@@ -26,17 +25,18 @@ import "../../chunks/chunk.RODNHT5C.js";
 import "../../chunks/chunk.3RR4RIR7.js";
 import "../../chunks/chunk.66HKI7Q7.js";
 import "../../chunks/chunk.VBS3JEIP.js";
-import "../../chunks/chunk.PLV4PZYX.js";
-import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.QLETXF4A.js";
 import "../../chunks/chunk.BHJVE26D.js";
-import "../../chunks/chunk.YACUYJZN.js";
-import "../../chunks/chunk.RY3ZM7MQ.js";
-import "../../chunks/chunk.VL3GX6WV.js";
-import "../../chunks/chunk.VMLERD3J.js";
+import "../../chunks/chunk.PLV4PZYX.js";
+import "../../chunks/chunk.5YZ63VR2.js";
+import "../../chunks/chunk.JEJO727M.js";
+import "../../chunks/chunk.JIHDB74M.js";
+import "../../chunks/chunk.ST3G47SZ.js";
 import "../../chunks/chunk.QDG5AJZX.js";
+import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.2NT3B5WJ.js";
-import "../../chunks/chunk.IUFTAV2I.js";
+import "../../chunks/chunk.I4M3MYDP.js";
+import "../../chunks/chunk.UA5B6CPN.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   validate_default as default

package/dist/custom-elements.json

@@ -144,82 +144,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/badge/badge.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynBadge",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The badge's content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "tagNameWithoutPrefix": "badge",
-          "tagName": "syn-badge",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynBadge",
-            "module": "components/badge/badge.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -560,6 +484,82 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynBadge",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The badge's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "syn-badge",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynBadge",
+            "module": "components/badge/badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/breadcrumb/breadcrumb.js",
@@ -15213,6 +15213,148 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/tag-group/tag-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynTagGroup",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The tag group's label.",
+              "name": "tag-label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tag group's main content. Must be `<syn-tag />` elements.",
+              "name": ""
+            },
+            {
+              "description": "The tag group's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "tagsInDefaultSlot",
+              "type": {
+                "text": "SynTag[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'label')"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tag group's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "labelPosition",
+              "type": {
+                "text": "'top' | 'start'"
+              },
+              "default": "'top'",
+              "description": "Controls the label position. Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.",
+              "attribute": "label-position",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The size that should be applied to all slotted `<syn-tag>` elements",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "adjustTagSize",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSizeChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tag group's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "label-position",
+              "type": {
+                "text": "'top' | 'start'"
+              },
+              "default": "'top'",
+              "description": "Controls the label position. Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.",
+              "fieldName": "labelPosition"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The size that should be applied to all slotted `<syn-tag>` elements",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.\nIt arranges tags in flexible rows and supports different sizes and layouts.\nTags can be removable, icon‑based, or purely textual.",
+          "tagNameWithoutPrefix": "tag-group",
+          "tagName": "syn-tag-group",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.\n * It arranges tags in flexible rows and supports different sizes and layouts.\n * Tags can be removable, icon‑based, or purely textual.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs\n * @status stable\n *\n * @slot - The tag group's main content. Must be `<syn-tag />` elements.\n * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The component's base wrapper.\n * @csspart tag-label - The tag group's label.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs",
+          "status": "stable"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynTagGroup",
+            "module": "components/tag-group/tag-group.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/textarea/textarea.js",
@@ -16613,6 +16755,17 @@
               "privacy": "private",
               "description": "Update the events on the input element."
             },
+            {
+              "kind": "method",
+              "name": "getDisplayValidationMessage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "description": "#851: Get the validation message that should be displayed to the user.\nPrioritizes customValidationMessage over the internal validationMessage state.\nThis is needed because frameworks may clear the internal validation message on\ndynamically rendered elements, but the customValidationMessage is still valid."
+            },
             {
               "kind": "method",
               "name": "setValidationMessage",
@@ -16767,7 +16920,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "3.6.1",
+    "version": "3.7.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/styles/fouc.css

@@ -57,6 +57,7 @@ syn-spinner:not(:defined),
 syn-switch:not(:defined),
 syn-tab:not(:defined),
 syn-tag:not(:defined),
+syn-tag-group:not(:defined),
 syn-tooltip:not(:defined) {
   display: inline-block;
   opacity: 0;

package/dist/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/components version 3.6.1
+ * @synergy-design-system/components version 3.7.0
  * SICK Global UX Foundation
  * 
  * This file is created automatically in the build process!
@@ -64,6 +64,7 @@ syn-spinner:not(:defined),
 syn-switch:not(:defined),
 syn-tab:not(:defined),
 syn-tag:not(:defined),
+syn-tag-group:not(:defined),
 syn-tooltip:not(:defined) {
   display: inline-block;
   opacity: 0;

package/dist/synergy.d.ts

@@ -40,6 +40,7 @@ export { default as SynSwitch } from './components/switch/switch.js';
 export { default as SynTabGroup } from './components/tab-group/tab-group.js';
 export { default as SynTabPanel } from './components/tab-panel/tab-panel.js';
 export { default as SynTab } from './components/tab/tab.js';
+export { default as SynTagGroup } from './components/tag-group/tag-group.js';
 export { default as SynTag } from './components/tag/tag.js';
 export { default as SynTextarea } from './components/textarea/textarea.js';
 export { default as SynTooltip } from './components/tooltip/tooltip.js';