@synergy-design-system/components 2.11.8 → 2.12.1

package/dist/custom-elements.json

@@ -144,6 +144,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.style/components/badge\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.style/components/badge",
+          "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",
@@ -448,82 +524,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.style/components/badge\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.style/components/badge",
-          "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",
@@ -15348,12 +15348,342 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/validate/validate.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynValidate",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the form field.",
+              "name": "input-wrapper"
+            },
+            {
+              "description": "The syn-alert that is shown when the variant is set to \"inline\".",
+              "name": "alert"
+            },
+            {
+              "description": "The container that wraps the alert.",
+              "name": "alert__base"
+            },
+            {
+              "description": "The container that wraps the alert message.",
+              "name": "alert__message"
+            },
+            {
+              "description": "The container that wraps the alert icon.",
+              "name": "alert__icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The form field that should be validated. Avoid slotting in more than one element, as subsequent ones will be ignored.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-alert': SynAlert, }"
+            },
+            {
+              "kind": "field",
+              "name": "controller",
+              "default": "new AbortController()"
+            },
+            {
+              "kind": "field",
+              "name": "slottedChildren",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "eagerFirstMount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "isInternalTriggeredInvalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "isValid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'native' | 'inline'"
+              },
+              "default": "'native'",
+              "description": "The variant that should be used to show validation alerts.\n\nThe following variants are supported:\n- **native** (default): Uses the native browser validation, usually a browser tooltip.\n- **inline**: Show the validation message underneath the element, using a `<syn-alert>`",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hideIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Do not show the error icon when using the inline variant validation",
+              "attribute": "hide-icon",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "on",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Defines the events that trigger the validation.\n`invalid` will always automatically be included.\nYou may also use the `live` keyword to validate on every input change.\n`live` will make sure to listen to the `invalid`, `input` and `blur` events.\n\nPlease have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.",
+              "attribute": "on",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "customValidationMessage",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Custom validation message to be displayed when the input is invalid.\nWill override the default browser validation message.\nSet to an empty string to reset the validation message.",
+              "attribute": "custom-validation-message"
+            },
+            {
+              "kind": "field",
+              "name": "eager",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set this to true to validate the input immediately when it is rendered.\nBest used with a `variant` of `inline`.\nWhen setting eager, the input will not be focused automatically.\n\nWhen using a `variant` of `native` the browser will focus\nthe last eager field as it is using a tooltip.\nIn this case it is better to just provide one eager field.",
+              "attribute": "eager"
+            },
+            {
+              "kind": "method",
+              "name": "handleListenerChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleEagerChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleCustomValidationMessageChange"
+            },
+            {
+              "kind": "method",
+              "name": "getValidity",
+              "description": "Returns the validity state of the input component.\n`true` for valid and `false` for invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getInput",
+              "privacy": "private",
+              "description": "Get the input element to validate. Defined as the first slotted element",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getUsedEventNames",
+              "privacy": "private",
+              "description": "Get the event names to listen for.\nIf the input is a synergy element, will use syn- prefixes.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateEvents",
+              "privacy": "private",
+              "description": "Update the events on the input element."
+            },
+            {
+              "kind": "method",
+              "name": "setValidationMessage",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "HTMLInputElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidationMessage",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "HTMLInputElement"
+                  }
+                }
+              ],
+              "description": "Set the custom validation message to the input. This will make sure to either:\n- use the custom message if one is set or\n- use the default message if the custom message is empty"
+            },
+            {
+              "kind": "field",
+              "name": "internalRevalidate",
+              "privacy": "private",
+              "description": "Set the validation message from the input element",
+              "parameters": [
+                {
+                  "description": "The event that was received",
+                  "name": "e"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "input",
+                  "type": {
+                    "text": "HTMLInputElement"
+                  }
+                }
+              ],
+              "description": "Handle the blur event during validation"
+            },
+            {
+              "kind": "field",
+              "name": "validate",
+              "privacy": "private",
+              "description": "Triggers a validation run, showing the validation message if needed."
+            },
+            {
+              "kind": "method",
+              "name": "renderInlineValidation",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'native' | 'inline'"
+              },
+              "default": "'native'",
+              "description": "The variant that should be used to show validation alerts.\n\nThe following variants are supported:\n- **native** (default): Uses the native browser validation, usually a browser tooltip.\n- **inline**: Show the validation message underneath the element, using a `<syn-alert>`",
+              "fieldName": "variant"
+            },
+            {
+              "name": "hide-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Do not show the error icon when using the inline variant validation",
+              "fieldName": "hideIcon"
+            },
+            {
+              "name": "on",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Defines the events that trigger the validation.\n`invalid` will always automatically be included.\nYou may also use the `live` keyword to validate on every input change.\n`live` will make sure to listen to the `invalid`, `input` and `blur` events.\n\nPlease have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.",
+              "fieldName": "on"
+            },
+            {
+              "name": "custom-validation-message",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Custom validation message to be displayed when the input is invalid.\nWill override the default browser validation message.\nSet to an empty string to reset the validation message.",
+              "fieldName": "customValidationMessage"
+            },
+            {
+              "name": "eager",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set this to true to validate the input immediately when it is rendered.\nBest used with a `variant` of `inline`.\nWhen setting eager, the input will not be focused automatically.\n\nWhen using a `variant` of `native` the browser will focus\nthe last eager field as it is using a tooltip.\nIn this case it is better to just provide one eager field.",
+              "fieldName": "eager"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Validate provides form field validation messages in a unified way.\nIt does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\nand showing the validation message in a consistent, user defined way.",
+          "tagNameWithoutPrefix": "validate",
+          "tagName": "syn-validate",
+          "customElement": true,
+          "jsDoc": "/**\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 *\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 */",
+          "dependencies": [
+            "syn-alert"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynValidate",
+            "module": "components/validate/validate.js"
+          }
+        }
+      ]
     }
   ],
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.11.8",
+    "version": "2.12.1",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/styles/fouc.css

@@ -27,7 +27,8 @@ syn-select:not(:defined),
 syn-side-nav:not(:defined),
 syn-tab-group:not(:defined),
 syn-tab-panel:not(:defined),
-syn-textarea:not(:defined) {
+syn-textarea:not(:defined),
+syn-validate:not(:defined) {
   display: block;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;

package/dist/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/components version 2.11.8
+ * @synergy-design-system/components version 2.12.1
  * SICK Global UX Foundation
  * 
  * This file is created automatically in the build process!
@@ -35,7 +35,8 @@ syn-select:not(:defined),
 syn-side-nav:not(:defined),
 syn-tab-group:not(:defined),
 syn-tab-panel:not(:defined),
-syn-textarea:not(:defined) {
+syn-textarea:not(:defined),
+syn-validate:not(:defined) {
   display: block;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;

package/dist/synergy.d.ts

@@ -43,6 +43,7 @@ export { default as SynTab } from './components/tab/tab.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';
+export { default as SynValidate } from './components/validate/validate.js';
 export * from './utilities/base-path.js';
 export * from './utilities/icon-library.js';
 export * from './utilities/form.js';